今天和別人聊到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í)行。

代碼示例

//節(jié)流方法 1function 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é)流方法 2function 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);

運行結(jié)果

時間差 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
防抖

結(jié)論

由以上運行結(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é)流方法；防止頻繁操作，比如表單多次提交，推薦使用防抖。

如有問題，歡迎指正，謝謝！

總結(jié)

以上是生活随笔為你收集整理的JavaScript 函数节流 throttle 和防抖 debounce的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。