如果鼠标悬停（光标）的条件在 "a tag" 中超过三个秒，如何添加？

Question

我的问题不是动画的持续时间。我的问题是 - 如果鼠标在 TAG 中停留超过 3 秒。悬停效果会出现，但永远不会在 3 秒之前加载数据。所以只在 3 秒后加载数据。下面是我的 html 代码，我无法添加 class 名称和 ID 名称，因为它们都是动态的

Html:

 <a href="#" style="display: inline !important; cursor:pointer;">
   <div onmouseover="Snapshot("some backend data")"></div>
</a>

我正在寻找这种类型的结构。

if (time >= 3000s)
{
add data
}
else
{
add another
}

Answer 1

您想为启动计时器的鼠标悬停事件创建一个函数。如果该计时器达到 3000 毫秒或更多，则调用该函数来更新您正在更新的内容。

同时创建一个清除超时的 mouseout 事件。

<a href="#" onmouseover="snapshot('some backend data')" onmouseout="clearSnapshotTimeout()">Move your cursor and wait 3 seconds</a>

var snapshotTimeout;

// code that deals with (loads) data here.
function snapshot(data) {
    snapshotTimeout = window.setTimeout(function() {
        alert('alert happens after 3 seconds');
    }, 3000);
}

function clearSnapshotTimeout() {
    window.clearTimeout(snapshotTimeout);
}

编辑：
如果您无法将 mouseout 事件添加到 html 页面，那么您可以试试这个：

<a href="#" onmouseover="snapshot('some backend data')">Move your cursor and wait 3 seconds</a>

var snapshotTimeout;
// code that deals with (loads) data here.
function snapshot(data) {
    snapshotTimeout = window.setTimeout(function() {
        alert('alert happens after 3 seconds');
    }, 3000);
}

function clearSnapshotTimeout() {
    window.clearTimeout(snapshotTimeout);
}

// add the mouseout event handler to each element that has a mouseover attribute.
var mouseOverElements = document.querySelectorAll('[onmouseover^="snapshot("');

for(var i=0;i<mouseOverElements.length;i++) {
  console.log(mouseOverElements[i]);
    mouseOverElements[i].onmouseout = function() {
        clearSnapshotTimeout();
    }
}

Answer 2

两件事，您的 a 标签必须具有一些独特的功能，例如 class/id/data 属性才能在 Javascript 中精确定位它。否则，您唯一的方法就是让所有 a 标签对您想要创建的行为做出反应。

我希望你应该有办法做到这一点。

假设您已经为 a 标签指定了 id。你应该可以做到这一点。

const myLink = document.getElementById('myId');

let timeout;

myLink.on('mouseover', () => {
    timeout = window.setTimeout(() => doStuff);
});

myLink.on('mouseout'), () => {
    window.clearTimeout(timeout);
});

function doStuff () {
   // Your logic here
}

如果鼠标悬停（光标）的条件在 "a tag" 中超过三个秒，如何添加？

how to add if condition for mouseover (cursor) exceeds three scond in a "a tag"?

html

javascript

jquery

if-statement

jquery-hover