在 mousemove 上安排超时

Question

我正在阅读the events chapter in 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 语句，程序将无法按预期运行，它会毫不拖延地打印坐标。这背后的逻辑是什么？

Answer 1

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

没有标志，对 displayCoords 的第一次调用将在 250 毫秒后进行，但对 displayCoords 的后续调用将一个接一个地触发，因为每个 mousemove 都会产生一个计时器, 无需等待上一个结束。

在 mousemove 上安排超时

Scheduling a timeOut on mousemove

javascript

mousemove

dom-events