我的问题不是动画的持续时间。 我的问题是 - 如果鼠标在 TAG 中停留超过 3 秒。悬停效果会出现,但不要在 3 秒之前加载数据。因此仅在 3 秒后加载数据。下面是我的 html 代码,我无法添加类名和 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
}
最佳答案
您想要为启动计时器的鼠标悬停事件创建一个函数。如果该计时器达到 3000 毫秒或更长,则调用该函数来更新您正在更新的内容。
还创建一个清除超时的鼠标悬停事件。
<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);
}
编辑:
如果您无法向 html 页面添加 mouseout 事件,那么您可以尝试以下操作:
<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();
}
}
关于javascript - 如何在 "a tag"中添加鼠标悬停(光标)的条件超过三秒?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58950524/