如何在兩秒鐘的懸停後執行一項功能？

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

您需要使用計時器。在mouseover中設置它，然後在定時器回調中做你的工作;您還需要處理停止計時器的鼠標事件。

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

在mouseover事件中調用setTimeout。將返回值存儲在共享的地方（例如，在關閉中）。

在mouseout事件中調用clearTimeout。如果該事件在兩秒鐘之前沒有觸發，則傳遞給setTimeout的功能將被調用。

Answer 3

這將是這樣的，使用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); 
});