调度鼠标移动超时

Scheduling a timeOut on mousemove

本文关键字：超时 移动 鼠标 调度      更新时间：2023-09-26

我正在阅读Eloquent Javascript中的事件章节，我遇到了以下代码。它应该每隔250毫秒显示一次用户鼠标的坐标。

  function displayCoords(event) {
    document.body.textContent =
      "Mouse at " + event.pageX + ", " + event.pageY;
  }
  var scheduled = false, lastEvent;
  addEventListener("mousemove", function(event) {
    lastEvent = event;
    if (!scheduled) {
      scheduled = true;
      setTimeout(function() {
        scheduled = false;
        displayCoords(lastEvent);
      }, 250);
    }
  });

我不明白调度是如何工作的。我明白，如果你设置一个timeOut，处理程序将在设置的时间段后运行，但我不明白为什么在这个例子中存在一个计划变量和一个条件语句来检查它的布尔值。

如果没有变量和if语句，程序将不能按预期工作，它将打印坐标而不会有任何延迟。这背后的逻辑是什么?

scheduled标志的目的是防止在每个mousemove事件调用上创建定时器。只有在当前的setTimeout完成后，并且标志为false，才会创建一个新的setTimeout。

如果没有标志，对displayCoords的第一次调用将在250ms之后进行，但是对displayCoords的后续调用将一个接一个地触发，因为每个mousemove都会产生一个计时器，而不会等待前一个结束。

相关文章：