節流

throttle 的中心思想在於：在某段時間內，無論你觸發了多少次回調，我都只認第一次，並在計時結束時給予響應。

先給你們講個小故事：如今有一個旅客剛下了飛機，須要用車，因而打電話叫了該機場惟一的一輛機場大巴來接。司機開到機場，心想來都來了，多接幾我的一塊兒走吧，這樣這趟才跑得值——我等個十分鐘看看。因而司機一邊打開了計時器，一邊招呼後面的客人陸陸續續上車。在這十分鐘內，後面下飛機的乘客都只能乘這一輛大巴，十分鐘過去後，無論後面還有多少沒擠上車的乘客，這班車都必須發走。

在這個故事裏，「司機」 就是咱們的節流閥，他控制發車的時機；「乘客」就是由於咱們頻繁操做事件而不斷涌入的回調任務，它須要接受「司機」的安排；而「計時器」，就是咱們上文提到的以自由變量形式存在的時間信息，它是「司機」決定發車的依據；最後「發車」這個動做，就對應到回調函數的執行。

總結下來，所謂的「節流」，是經過在一段時間內無視後來產生的回調請求來實現的。只要一位客人叫了車，司機就會爲他開啓計時器，必定的時間內，後面須要乘車的客人都得排隊上這一輛車，誰也沒法叫到更多的車。

對應到實際的交互上是同樣同樣的：每當用戶觸發了一次 scroll 事件，咱們就爲這個觸發操做開啓計時器。一段時間內，後續全部的 scroll 事件都會被看成「一輛車的乘客」——它們沒法觸發新的 scroll 回調。直到「一段時間」到了，第一次觸發的 scroll 事件對應的回調纔會執行，而「一段時間內」觸發的後續的 scroll 回調都會被節流閥無視掉。

理解了大體的思路，咱們如今一塊兒實現一個 throttle：

// fn是咱們要包裝的回調函數事件，Interval是咱們要傳入的時間間隔
function throttle(fn, Interval) {
// 記錄上一次調用的時間；

let last = 0;
return function() {
    // 保存上下文的this
    let context = this
    // 保存傳入的參數
    let args = arguments;
    // 保存調用時的時間;
    let now = + new Date;
    // 判斷上一次調用時間和當前調用時間對比
    if (now - last > Interval) {
    // 更新最後一次調用時間;
        last = now;
        fn.apply(context, args);
    }
}

}
// 用throttle來包裝scroll的回調
let better_scroll = throttle(() => {console.log('觸發了滾動事件'), 1000});
document.addEventListener('scroll', better_scroll);