[TOC] # 簡介 如果你持續觸發事件，每隔一段時間，只執行一次事件。 <br> 根據首次是否執行以及結束后是否執行，效果有所不同，實現的方式也有所不同。 <br> 我們用 leading 代表首次是否執行，trailing 代表結束后是否再執行一次。 <br> throttling的特點在連續高頻觸發事件時，動作會被定期執行，響應平滑。 <br> 延遲throttling示意圖：  <br> 前緣throttling 示意圖：  <br> 關于節流的實現，有兩種主流的實現方式，一種是使用時間戳，一種是設置定時器。 <br> <br> # 使用時間戳 當觸發事件的時候，我們取出當前的時間戳，然后減去之前的時間戳(最一開始值設為 0 )，如果大于設置的時間周期，就執行函數，然后更新時間戳為當前的時間戳，如果小于，就不執行。 ~~~ /** * 時間戳實現 */ function throttle1(func, wait) { var previous = 0 // var context, args return function () { var now = +new Date() var args = arguments var context = this if (now - previous > wait) { func.apply(context, args) previous = now } } } ~~~ 效果演示如下：  當鼠標移入的時候，事件立刻執行，每過 1s 會執行一次，如果在 4.2s 停止觸發，以后不會再執行事件。 <br> <br> # 使用定時器 當觸發事件的時候，我們設置一個定時器，再觸發事件的時候，如果定時器存在，就不執行，直到定時器執行，然后執行函數，清空定時器，這樣就可以設置下個定時器。 ~~~ /** * 定時器實現 */ function throttle2(func, wait) { var timeout var context, args return function () { context = this args = arguments if (!timeout) { timeout = setTimeout(function () { timeout = null func.apply(context, args) }, wait) } } } ~~~ 為了讓效果更加明顯，我們設置 wait 的時間為 3s，效果演示如下：  我們可以看到：當鼠標移入的時候，事件不會立刻執行，晃了 3s 后終于執行了一次，此后每 3s 執行一次，當數字顯示為 3 的時候，立刻移出鼠標，相當于大約 9.2s 的時候停止觸發，但是依然會在第 12s 的時候執行一次事件。 <br> <br> 所以比較兩個方法： 1. 第一種事件會立刻執行，第二種事件會在 n 秒后第一次執行 2. 第一種事件停止觸發后沒有辦法再執行事件，第二種事件停止觸發后依然會再執行一次事件 <br> <br> # 優化 我們設置個 options 作為第三個參數，然后根據傳的值判斷到底哪種效果，我們約定: * leading：false 表示禁用第一次執行 * trailing: false 表示禁用停止觸發的回調 ~~~ function throttle(func, wait, options) { var timeout, context, args, result; var previous = 0; if (!options) options = {}; var later = function() { previous = options.leading === false ? 0 : new Date().getTime(); timeout = null; func.apply(context, args); if (!timeout) context = args = null; }; var throttled = function() { var now = new Date().getTime(); if (!previous && options.leading === false) previous = now; var remaining = wait - (now - previous); context = this; args = arguments; if (remaining <= 0 || remaining > wait) { if (timeout) { clearTimeout(timeout); timeout = null; } previous = now; func.apply(context, args); if (!timeout) context = args = null; } else if (!timeout && options.trailing !== false) { timeout = setTimeout(later, remaining); } }; return throttled; } ~~~ <br> <br> # 取消 在 debounce 的實現中，我們加了一個 cancel 方法，throttle 我們也加個 cancel 方法： ~~~js ... throttled.cancel = function() { clearTimeout(timeout); previous = 0; timeout = null; } ... ~~~ # 注意 我們要注意 underscore 的實現中有這樣一個問題： 那就是`leading：false`和`trailing: false`不能同時設置。 如果同時設置的話，比如當你將鼠標移出的時候，因為 trailing 設置為 false，停止觸發的時候不會設置定時器，所以只要再過了設置的時間，再移入的話，就會立刻執行，就違反了 leading: false，bug 就出來了，所以，這個 throttle 只有三種用法： ~~~js container.onmousemove = throttle(getUserAction, 1000); container.onmousemove = throttle(getUserAction, 1000, { leading: false }); container.onmousemove = throttle(getUserAction, 1000, { trailing: false }); ~~~ <br> <br> # 參考資料 [防抖(debounce) 和 節流(throttling)](https://blog.csdn.net/hupian1989/article/details/80920324)