javascript - 悬停两秒后如何执行功能？

Question

这是我当前的代码

google.maps.event.addListener(marker, `mouseover`, function() { 
  alert('loaded when i hovered');
});

但如果鼠标在元素上停留两秒钟，我希望执行该函数。

我试过这个，但没有用。

 google.maps.event.addListener(marker, `mouseover  2000`, function() { 
   alert('loaded after then when i stay mouse 2 sec'); 
 });

在悬停两秒钟后，我需要做什么才能使函数执行？

Answer 1

您需要使用计时器。将其设置为鼠标悬停，然后在计时器回调中完成您的工作；您还需要处理停止计时器的 mouseout 事件。

var timeoutId = null;
google.maps.event.addListener(marker, 'mouseover',function() { 
   timeoutId = window.setTimeout(function(){
     alert("I did it!");
   }, 2000);
 } );

// Cancel your action if mouse moved out within 2 sec
google.maps.event.addListener(marker, 'mouseout',function() { 
  window.clearTimeout(timeoutId)
});

Answer 2

它会是这样的，使用setTimeout

var timer;

google.maps.event.addListener(marker, 'mouseover', function() {        
   timer = window.setTimeout(function(){
     alert("Stackoverflow Rocks!!!");
   }, 2000);
 } );

google.maps.event.addListener(marker, 'mouseout', function() {        
   window.clearTimeout(timer);
 } );

Answer 3

调用setTimeoutmouseover 事件。将返回值存储在某个共享的地方（例如，在闭包中）。

调用clearTimeoutmouseout 事件。如果该事件在两秒结束之前没有触发，那么您传递给的函数setTimeout将被调用。