淺談JavaScript中的防抖和節流
阿新 • • 發佈:2018-12-09
日常生活中:我們需要解決專案中由於網路延遲或者一些其他原因造成介面重複呼叫導致後臺資料重複
想象每天上班大廈底下的電梯。把電梯完成一次運送,類比為一次函式的執行和響應。假設電梯有兩種執行策略 throttle 和 debounce ,超時設定為15秒,不考慮容量限制。
throttle 策略的電梯。保證如果電梯第一個人進來後,15秒後準時運送一次,不等待。如果沒有人,則待機。
debounce 策略的電梯。如果電梯裡有人進來,等待15秒。如果又人進來,15秒等待重新計時,直到15秒超時,開始運送。
無論是防抖還是節流最終的目的都是避免回撥函式中的處理每次都執行
。
1.防抖的思想:
藉助事件佇列和setTimeout定時器來實現:
// 計時器
var timer = false;
//
var shake = function(){
clearTimeout(timer);
timer = setTimeout(function(){
console.log("防抖");
},3000);
};
為什麼要清除定時器:因為如果每次呼叫函式的時候不清除會導致多次觸發
比如:
for (var i = 0; i < 10; i++) {
(function (i) {
setTimeout(function () {
console.log(i);
}, 3000);
})(i);
}
//三秒後會輸出1,2,3,4,5,6,7,8,9
var timer2 = false;
for (var i = 0; i < 10; i++) {
clearTimeout(timer2);
(function (i) {
timer2 = setTimeout(function () {
console.log(i);
}, 3000);
})(i);
}
//三秒後輸出9
2.節流思想如下:
藉助定義的變數和setTimeout來實現一定時間內只執行一次
var flag = true;
var throttle = function(){
if(!flag) return false;
flag = false;
setTimeout(function(){
console.log("節流"); flag = true; },300); };