節流事件

有一些事件是會頻繁觸發的，好比scroll resize mousemove keyup
若是在這些事件上綁定函數，而且這些函數要進行耗性能的計算，那麼會致使頁面忽急忽緩，反應遲鈍,這時就須要使用節流事件來控制函數被觸發的頻率。

function handler() {
    // 處理一些耗性能的計算
    // 或者發送ajax請求

    console.log('2333');
}

$(window).scroll(handler); // 反覆觸發handler，影響性能

方法一 setTimeout

var timer = 0;

$(window).scroll(function() {
    if (!timer) {
        timer = setTimeout(function() {
            handler();
            timer = 0;
        }, 1000);
    }
});

方法二 setInterval

// scroll雖然綁定了一個會頻繁觸發的函數，可是該函數只是改變scrolled的值，不會影響性能

var scrolled = false;

$(window).on('scroll', function() {
    scrolled = true;
});

setInterval(function() {
    if (scrolled) {
        handler();
        scrolled = false;
    }
}, 1000);

---

想象一個場景：實時搜索

在輸入框輸入關鍵詞後就要立刻顯示結果，一般作法是在keyup上綁定handler處理函數，發送ajax請求。可是若是用戶輸入速度很快，那麼keyup會觸發屢次，發送多個ajax請求，而咱們只是想要在用戶中止輸入的時間超過1s後才發送ajax

這和前面的scroll事件又有些不一樣，在這裏我只想handler函數在keyup觸發後執行一次
前面兩種方法只是減小了handler()觸發的頻率，可是仍然會觸發屢次

方法三 clearTimeout

var searchTimeout = null;
$('#input').on('keyup', function(event) {
    //每次keyup時直接取消上次計時器，只有當keyup超過1s時才執行handler
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(function() {
        handler();
    }, 1000);
});

參考：《jQuery基礎教程》