JavaScript中的定时控制

   <p>你可能知道，JavaScript遵循事件驱动的编程范例。这意味着一些行为可以激活一些响应，并且这些响应仅在发生特定的行为时才被激活。我们称这些行为 events (事件)，和响应 callbacks (回调)。连续的事件流被称为 event stream （事件流）。</p>    <p>这些行为发生的速度不是我们能手动控制的。但是我们可以控制何时和如何激活正确的响应。有一些技术为我们提供精确的控制。</p>    <ul>     <li>Throttle</li>     <li>Debounce</li>     <li>Immediate</li>    </ul>    <h2><strong>Throttle</strong></h2>    <p>在现代浏览器中，帧速率为60fps是流畅性能的目标，给定我们16.7ms的时间预算用于响应一些事件所有需要的更新。这样可以推断，如果每秒发生 n 个事件并且回调执行，需要 t 秒的时间，为了流畅运行，</p>    <p>1 / n >= t</p>    <p>如果 t 以毫秒为单位，</p>    <p>1000 / n >= t</p>    <p>如果你曾经使用mousemove事件，你会知道产生 mousemove 事件的数量每秒可以超过60次。如果我们的回调需要超过16.7ms，那就开始凌乱了。</p>    <pre>  <code class="language-javascript">var then = 0;    function log() {    var now = Date.now();    if (1000 / (now - then) > 60) {      console.log('It\'s over 9000!!!');    }    then = now;  }    window.onmousemove = log;</code></pre>    <h3><strong>实现</strong></h3>    <p>Throttle 允许我们限制我们激活响应的数量。我们可以限制每秒回调的数量。反过来，也就是说在激活下一个回调之前要等待多少时间;</p>    <pre>  <code class="language-javascript">var delta = 1000;  var then = 0;    function log() {    console.log('foo');  }    function throttledLog() {    var now = Date.now();    if (now - then >= delta) {      log();        then = now;    }  };    window.onmousemove = throttledLog;</code></pre>    <p>我们可以用 fps 替换 delta ，并推断出不同的代码。</p>    <pre>  <code class="language-javascript">var fps = 60;  ...  function throttledLog() {    var now = Date.now();    if (1000 / (now - then) <= fps) {      log();        then = now;    }  };    window.onmousemove = throttledLog;</code></pre>    <p>我们也可以通过使用 setTimeout 来实现相同的结果。 但是，不是检查时间差，而是检查状态变化。</p>    <p>第一次，我们可以安全地激活回调。一旦完成，只有在等待 delta 时间之后才能再次激活回调。</p>    <pre>  <code class="language-javascript">var delta = 1000;  var safe = true;    function log() {    console.log('foo');  }    function throttledLog() {    if (safe) {      log();        safe = false;      setTimeout(function() {        safe = true;      }, delta);    }  };    window.onmousemove = throttledLog;</code></pre>    <h2><strong>Debounce</strong></h2>    <p>这个术语-去抖动 来自电子学的领域，手动开关输入的信号被发送到数字电路中。在电子学中，当你按一个物理按钮一次，数字电路可能读到多个按压，因为按钮的物理属性（金属触点，弹簧，磨损件等）。</p>    <p>去抖动意味着采集到的所有这些波动的信号，并把它们当作一个。</p>    <h3>例子</h3>    <p>一个简单的例子已经存在于JS中： keydown vs keyup 。假设您正在处理一个项目，并且需要输入内容。但是你想要每次敲击键盘得到一个字符。输入时，如果长按一个键， keydown 事件将连续被触发，但是 keyup 事件只有在按键被释放时才会触发。</p>    <pre>  <code class="language-javascript">window.onkeyup = function() {    console.log('onkeyup');  }    window.onkeydown = function() {    console.log('onkeydown');  }</code></pre>    <p>这种行为上的差异对于确定输入是否已完成是有用的。在示例场景中，它是你将使用的keyup事件。在某种程度上，我们可以说 keydown 是原始输入， keyup 是去抖动输入。</p>    <h3><strong>实现</strong></h3>    <p>当事件发生时，我们不会立即激活回调。相反，我们等待一定的时间并检查相同的事件是否再次触发。如果是，我们重置定时器，并再次等待。如果在等待期间没有发生相同的事件，我们就立即激活回调。</p>    <pre>  <code class="language-javascript">var delta = 1000;  var timeoutID = null;    function log() {    console.log('foo');  }    function debouncedLog() {    clearTimeout(timeoutID);  // reset timer    timeoutID = setTimeout(function() {      // wait for some time      // and check if event happens again      log();    }, delta);  };    window.onkeydown = debouncedLog;</code></pre>    <h2><strong>Immediate</strong></h2>    <p>Immediate是Debounce的精确版本。比起 Debounce 的 等待后续事件触发，然后再激活回调，Immediate 是 立即激活回调，然后等待后续事件在一定时间内触发。</p>    <h3><strong>实现</strong></h3>    <p>就像Throttle的情况一样，我们需要一个状态变量来检查是否应该激活我们的回调。我们在Debounce不需要一个，因为 timeoutID 隐式管理这部分。</p>    <pre>  <code class="language-javascript">var delta = 1000;  var timeoutID = null;  var safe = true;    function log() {    console.log('foo');  }    function immediatedLog() {    if (safe) {      log();      safe = false;    }      clearTimeout(timeoutID);    timeoutID = setTimeout(function() {      safe = true;    }, delta);  };    window.onkeydown = immediatedLog;</code></pre>    <h2><strong>结论</strong></h2>    <p>在这篇文章中，我们已经探索了用作定时函数的最常见的技术。 虽然这篇文章很长，但它仍然缺乏一个坚实的演示。</p>    <p> </p>    <p>来自：http://www.css88.com/archives/6589</p>    <p> </p>