mousemove事件后1分鍾如何運行功能？

Question

我想在上一個mousemove事件之后運行一個函數。 我試過下面的代碼：

@HostListener('document:mousemove', ['event'])
   eventHandler(event) {
    setTimeout(() => {
     // do something
    }, 60000);
   }

問題是，它將在第一個mousemove事件中觸發，並且如果發生另一個事件，則不會重置時間。 每次事件發生時如何重置它並啟動setTimeout函數？

Answer 1

我不確定您使用的是哪個框架，但是通常您需要存儲計時器的ID並每次都將其取消，然后啟動一個新的-記住捕獲該ID。

 var timerId = 0 document.addEventListener("mousemove",function(){ clearTimeout(timerId); timerId = setTimeout(function(){ console.log("5 seconds since last mouse move"); },5000); }); 

Answer 2

好吧，當您調用setTimeout ，返回值是一個數字，表示所設置計時器的ID值。 將此值與clearTimeout()方法一起使用可取消計時器，並在發生新事件時再次設置它。 您可以在此處和此處閱讀有關setTimeout和clearTimeout的更多信息。

基本上，您可以像這樣：

//global variable
var timeoutID;

[...]

@HostListener('document:mousemove', ['event'])
   eventHandler(event) {
    if (timeoutID)
        clearTimeout(timeoutID);

    timeoutID = setTimeout(() => {
     // do something
    }, 60000);
}

我也提供了一個簡單的jsfiddle（純js，沒有框架）：

 var timeoutValue = 2000; var timeoutID; document.addEventListener("mousemove", function() { if (timeoutID) clearTimeout(timeoutID); timeoutID = setTimeout(function() { console.log(timeoutValue + " just passed"); }, 2000); }); 

干杯!