在 mousemove 上安排 timeOut答案

【问题标题】：Scheduling a timeOut on mousemove在 mousemove 上安排 timeOut
【发布时间】：2015-09-12 22:15:08
【问题描述】：

我在看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 语句，程序将无法按预期工作，它会毫无延迟地打印坐标。这背后的逻辑是什么？

【问题讨论】：

逻辑关闭。 scheduled 和条件是无用的，在这种情况下，除非你有一些其他功能可以将 scheduled var 设置为 true 并停止 setTimeout onmousemove。
我还以为它们没用，但是！在 Ori 的帮助下，我能够解决这个问题 - 见下文由于 timeOut 设置为每 250 毫秒一次为 false，因此条件语句是一种阻止每 250 毫秒调用一次超时的方法。
好吧，我的逻辑错了。感谢您清除它。
是的，这不是问题。

标签： javascript dom-events mousemove

【解决方案1】：

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

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

【讨论】：

谢谢！这很有意义，
我认为是什么让我失望了，我不明白在 timeOut 中将 schedule 设置为 false 只会每 250 毫秒将其设置为 false，我在想 displayCoords 延迟了 250 毫秒，但没有将预定变量设置为 false，所以我对 displayCoords 实际延迟的方式感到非常困惑。这叫你说的flag？我试图用谷歌搜索模式“javascript schedule”，但实际上找不到任何东西。
没错！当为 true 时，标志会阻止任何后续的 setTimeout，直到当前超时完成，并且标志设置为 false。用于保存逻辑状态的布尔变量称为flag。
好的，这是一面旗帜，我会记住的。非常感谢。
我赞成你的评论，但我没有足够的代表来展示它。