節(jié)流

xcold 發(fā)布于2019-08-23 14:52 / 994人閱讀

摘要：總結(jié)下來，所謂的節(jié)流，是通過在一段時間內(nèi)無視后來產(chǎn)生的回調(diào)請求來實(shí)現(xiàn)的。直到一段時間到了，第一次觸發(fā)的事件對應(yīng)的回調(diào)才會執(zhí)行，而一段時間內(nèi)觸發(fā)的后續(xù)的回調(diào)都會被節(jié)流閥無視掉。

throttle 的中心思想在于：在某段時間內(nèi)，不管你觸發(fā)了多少次回調(diào)，我都只認(rèn)第一次，并在計(jì)時結(jié)束時給予響應(yīng)。

先給大家講個小故事：現(xiàn)在有一個旅客剛下了飛機(jī)，需要用車，于是打電話叫了該機(jī)場唯一的一輛機(jī)場大巴來接。司機(jī)開到機(jī)場，心想來都來了，多接幾個人一起走吧，這樣這趟才跑得值——我等個十分鐘看看。于是司機(jī)一邊打開了計(jì)時器，一邊招呼后面的客人陸陸續(xù)續(xù)上車。在這十分鐘內(nèi)，后面下飛機(jī)的乘客都只能乘這一輛大巴，十分鐘過去后，不管后面還有多少沒擠上車的乘客，這班車都必須發(fā)走。

在這個故事里，“司機(jī)” 就是我們的節(jié)流閥，他控制發(fā)車的時機(jī)；“乘客”就是因?yàn)槲覀冾l繁操作事件而不斷涌入的回調(diào)任務(wù)，它需要接受“司機(jī)”的安排；而“計(jì)時器”，就是我們上文提到的以自由變量形式存在的時間信息，它是“司機(jī)”決定發(fā)車的依據(jù)；最后“發(fā)車”這個動作，就對應(yīng)到回調(diào)函數(shù)的執(zhí)行。

總結(jié)下來，所謂的“節(jié)流”，是通過在一段時間內(nèi)無視后來產(chǎn)生的回調(diào)請求來實(shí)現(xiàn)的。只要一位客人叫了車，司機(jī)就會為他開啟計(jì)時器，一定的時間內(nèi)，后面需要乘車的客人都得排隊(duì)上這一輛車，誰也無法叫到更多的車。

對應(yīng)到實(shí)際的交互上是一樣一樣的：每當(dāng)用戶觸發(fā)了一次 scroll 事件，我們就為這個觸發(fā)操作開啟計(jì)時器。一段時間內(nèi)，后續(xù)所有的 scroll 事件都會被當(dāng)作“一輛車的乘客”——它們無法觸發(fā)新的 scroll 回調(diào)。直到“一段時間”到了，第一次觸發(fā)的 scroll 事件對應(yīng)的回調(diào)才會執(zhí)行，而“一段時間內(nèi)”觸發(fā)的后續(xù)的 scroll 回調(diào)都會被節(jié)流閥無視掉。

理解了大致的思路，我們現(xiàn)在一起實(shí)現(xiàn)一個 throttle：

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

let last = 0;
return function() {
    // 保存上下文的this
    let context = this
    // 保存?zhèn)魅氲膮?shù)
    let args = arguments;
    // 保存調(diào)用時的時間;
    let now = + new Date;
    // 判斷上一次調(diào)用時間和當(dāng)前調(diào)用時間對比
    if (now - last > Interval) {
    // 更新最后一次調(diào)用時間;
        last = now;
        fn.apply(context, args);
    }
}

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