title: JavaScript的函數(shù)節(jié)流
date: 2018-10-30 21:37:46
tags: [JavaScript]
categories: JavaScript
前言
我在我的網(wǎng)易云音樂項(xiàng)目中，因搜索歌曲的需求潜圃，需要監(jiān)聽輸入框的oninput事件拯勉。
但后來發(fā)現(xiàn)我的數(shù)據(jù)庫接受請求次數(shù)有些異常衔瓮，原來是用戶每一次輸入過程中都會向后端發(fā)送請求，非常浪費(fèi)性能五慈。
之后搜索并了解到j(luò)s的函數(shù)節(jié)流，有效解決了這一問題胳嘲，便有了這篇博客您没。
函數(shù)節(jié)流的原理
函數(shù)節(jié)流的原理就是定時器鸟召。
當(dāng)我觸發(fā)一個時間時，先setTimout讓這個事件延遲一會再執(zhí)行氨鹏，如果在這個時間間隔內(nèi)又觸發(fā)了事件欧募，那我們就clear掉原來的定時器，再setTimeout一個新的定時器延遲一會執(zhí)行喻犁，就是這樣槽片。
代碼實(shí)現(xiàn)
定義一個節(jié)流函數(shù)：
function throttle(fn, delay){
var timer = null;
return function(){
var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(context, args);
}, delay);
};
};
調(diào)用：
this.view.$el.on('input', '#search',(e)=>{
event(e)
})
let event = this.throttle((e)=>{
let val = $(e.currentTarget).val()
//...發(fā)送AJAX請求
}, 800, 1500)
理論上這樣寫很完美了，但仍存在一種問題：如果輸入框一直在輸入文字肢础，文字就一直不會顯示出來还栓。我們需要做一個處理：使得文字在超過某個時間間隔后要輸出一次。
優(yōu)化代碼：
function throttle(fn, delay, mustRunDelay){
var timer = null;
var t_start;
return function(){
var context = this, args = arguments, t_curr = +new Date();
clearTimeout(timer);
if(!t_start){
t_start = t_curr;
}
if(t_curr - t_start >= mustRunDelay){
fn.apply(context, args);
t_start = t_curr;
}
else {
timer = setTimeout(function(){
fn.apply(context, args);
}, delay);
}
};
};
注：本文參考資料
