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);
});

干杯！

如何在mousemove事件发生后1分钟运行功能？

2 个答案: