摘要:今天和別人聊到函數(shù)的節(jié)流和防抖,發(fā)現(xiàn)自己對這兩個的區(qū)別很是模糊,遂小小實踐一下,在此記錄,希望對需要的人有所幫助。防抖實現(xiàn)順利,但是兩個節(jié)流方法的執(zhí)行結(jié)果存在差異。
今天和別人聊到JavaScript函數(shù)的節(jié)流和防抖,發(fā)現(xiàn)自己對這兩個的區(qū)別很是模糊,遂小小實踐一下,在此記錄,希望對需要的人有所幫助。
節(jié)流 - 頻繁操作,間隔一定時間去做一件事舉例說明:假定時間間隔為 500ms,頻繁不停的操作 2s,且每兩次執(zhí)行時間小于等于時間間隔 500ms,那么就會執(zhí)行 4 次,也就是每隔 時間間隔 500ms 執(zhí)行一次。
防抖 - 頻繁操作,一定時間間隔內(nèi)只執(zhí)行最后一次操作舉例說明:假定時間間隔是 500ms,頻繁不停的操作 5s,且每兩次執(zhí)行時間小于等于時間間隔 500ms,那么最后只執(zhí)行了 1 次,也就是每一次執(zhí)行時都結(jié)束了上一次的執(zhí)行。
代碼示例</>復(fù)制代碼
//節(jié)流方法 1
function throttle1(method, duration){
var prevTime = new Date();
return function () {
var context = this,
currentTime = new Date(),
resTime = currentTime - prevTime;
//打印出本次調(diào)用方法和上次執(zhí)行方法的時間差
console.log("時間差"+resTime);
//當(dāng)本次調(diào)用距離上次執(zhí)行方法的時間差大于等于要求時間間隔時,執(zhí)行一次方法
if(resTime >= duration){
method.apply(context);
//記錄執(zhí)行方法的時間
prevTime = currentTime;
}
}
}
//節(jié)流方法 2
function throttle2(method, duration){
//當(dāng)前時間間隔內(nèi)是否有方法在執(zhí)行(或者說方法的調(diào)用是否在進(jìn)行)
var runningFlag = false;
return function (e) {
// 判斷當(dāng)前是否有方法在執(zhí)行,有,則什么都不做
if (runningFlag) {
return false;
}
//開始執(zhí)行
runningFlag = true;
setTimeout(function(){
method(e);
//執(zhí)行完畢,聲明當(dāng)前沒有正在執(zhí)行的方法,方便下一個時間間隔內(nèi)的調(diào)用
runningFlag = false;
}, duration)
}
}
//防抖
function debounce(method, duration){
var timer = null;
return function(){
var context = this,
args = arguments;
//在本次調(diào)用之前的一個間隔時間內(nèi),有方法在執(zhí)行,則終止該方法的執(zhí)行
if(timer){
clearTimeout(timer);
}
//開始執(zhí)行本次調(diào)用
timer = setTimeout(function(){
method.apply(context, args);
},duration);
}
}
//模擬三個執(zhí)行方法
function jieliu1(){
console.log("節(jié)流 1");
}
function jieliu2(){
console.log("節(jié)流 2");
}
function fangdou(){
console.log("防抖");
}
//持續(xù)執(zhí)行時間
var totalTime = 2000;
var jieliuFn1 = throttle1(jieliu1,500);
var jieliuFn2 = throttle2(jieliu2,500);
var fangdouFn = debounce(fangdou,500);
(function(duration){
setInterval(function(){
if( totalTime > 0 ){
jieliuFn1();
jieliuFn2();
fangdouFn();
totalTime -= duration;
}
},duration);
})(100);
運(yùn)行結(jié)果
結(jié)論</>復(fù)制代碼
時間差 100
時間差 201
時間差 303
時間差 401
時間差 504
節(jié)流 1
時間差 98
節(jié)流 2
時間差 199
時間差 300
時間差 396
時間差 496
時間差 597
節(jié)流 1
時間差 100
節(jié)流 2
時間差 203
時間差 299
時間差 402
時間差 500
節(jié)流 1
時間差 103
時間差 204
節(jié)流 2
時間差 303
時間差 400
節(jié)流 2
防抖
由以上運(yùn)行結(jié)果可以看出,節(jié)流1 出現(xiàn)了 3 次,節(jié)流2 出現(xiàn)了 4 次,防抖出現(xiàn)了 1 次。防抖實現(xiàn)順利,但是兩個節(jié)流方法的執(zhí)行結(jié)果存在差異。
觀察時間差可以看出,每次節(jié)流1 執(zhí)行時,時間差并不會都是 500 整,也就是說,一共調(diào)用 2 秒時,節(jié)流1 并不能做到每隔 500 毫秒執(zhí)行一次而共執(zhí)行 4 次,第四次執(zhí)行往往因為前面的 3 次執(zhí)行的時間誤差,而導(dǎo)致到達(dá)時間 2 秒時,最后一次的時間差無法達(dá)到 時間間隔 500ms 以上,以至于只能執(zhí)行 3 次。
結(jié)論:當(dāng)在一個大范圍的時間內(nèi),比如兩小時內(nèi),每幾分鐘執(zhí)行一次,超過2小時則不再實行,推薦使用第一種節(jié)流方式,;如果僅僅要求間隔一定時間執(zhí)行一次,推薦使用第二種節(jié)流方法;防止頻繁操作,比如表單多次提交,推薦使用防抖。
如有問題,歡迎指正,謝謝!文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/93789.html
摘要:主要實現(xiàn)在于通過異步操作的事件間隔,對于前后兩次調(diào)用方法打時間進(jìn)行比較,用清空定時器的操作實現(xiàn)多余調(diào)用操作的舍棄。 廢話不多說,直奔主題。 什么是throttle和debounce? 這兩個方法的主要目的多是用于性能優(yōu)化。最常見的應(yīng)用嘗盡就是在通過監(jiān)聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說,沒有處理時滑動一次滾動條scroll事件會觸發(fā)多...
摘要:主要實現(xiàn)在于通過異步操作的事件間隔,對于前后兩次調(diào)用方法打時間進(jìn)行比較,用清空定時器的操作實現(xiàn)多余調(diào)用操作的舍棄。 廢話不多說,直奔主題。 什么是throttle和debounce? 這兩個方法的主要目的多是用于性能優(yōu)化。最常見的應(yīng)用嘗盡就是在通過監(jiān)聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說,沒有處理時滑動一次滾動條scroll事件會觸發(fā)多...
摘要:主要實現(xiàn)在于通過異步操作的事件間隔,對于前后兩次調(diào)用方法打時間進(jìn)行比較,用清空定時器的操作實現(xiàn)多余調(diào)用操作的舍棄。 廢話不多說,直奔主題。 什么是throttle和debounce? 這兩個方法的主要目的多是用于性能優(yōu)化。最常見的應(yīng)用嘗盡就是在通過監(jiān)聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說,沒有處理時滑動一次滾動條scroll事件會觸發(fā)多...
摘要:當(dāng)?shù)诙握{(diào)用該函數(shù)時,它會清除前一次的定時器并設(shè)置另一個。然而,如果前一個定時器尚未執(zhí)行,其實就是將其替換為一個新的定時器,然后延遲一定時間再執(zhí)行。參考文章函數(shù)節(jié)流與函數(shù)防抖函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場景辨析函數(shù)節(jié)流函數(shù)防抖實現(xiàn)原理分析 前言 事件的觸發(fā)權(quán)很多時候都屬于用戶,有些情況下會產(chǎn)生問題: 向后臺發(fā)送數(shù)據(jù),用戶頻繁觸發(fā),對服務(wù)器造成壓力 一些瀏覽器事件:window.onresi...
摘要:當(dāng)?shù)诙握{(diào)用該函數(shù)時,它會清除前一次的定時器并設(shè)置另一個。然而,如果前一個定時器尚未執(zhí)行,其實就是將其替換為一個新的定時器,然后延遲一定時間再執(zhí)行。參考文章函數(shù)節(jié)流與函數(shù)防抖函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場景辨析函數(shù)節(jié)流函數(shù)防抖實現(xiàn)原理分析 前言 事件的觸發(fā)權(quán)很多時候都屬于用戶,有些情況下會產(chǎn)生問題: 向后臺發(fā)送數(shù)據(jù),用戶頻繁觸發(fā),對服務(wù)器造成壓力 一些瀏覽器事件:window.onresi...
閱讀 1627·2021-09-08 10:42
閱讀 3610·2021-08-11 10:23
閱讀 3978·2019-08-30 14:10
閱讀 2739·2019-08-29 17:29
閱讀 3097·2019-08-29 12:50
閱讀 645·2019-08-26 13:36
閱讀 3461·2019-08-26 11:59
閱讀 1494·2019-08-23 16:23