今天突然被人問到，函數節(jié)流和函數防抖的區(qū)別是什么，
結果我腦子一熱直接舉了個滾動條的粟子說是優(yōu)化高頻率執(zhí)行的手段，就記得自己是用setTimeout來實現(xiàn)的。
完了區(qū)別是什么？？哪個是哪個都蒙B了
回家想想，有些東西只有當自己要用到的時候，結合當前的需求才能真正想到要怎么做，
其實還是自己缺少總結，把原理理解成一種常態(tài)會更深刻

?

一、概念解釋

?函數節(jié)流和函數防抖，兩者都是優(yōu)化高頻率執(zhí)行js代碼的一種手段。
?大家大概都知道舊款電視機的工作原理，就是一行行得掃描出色彩到屏幕上，然后組成一張張圖片。由于肉眼只能分辨出一定頻率的變化，當高頻率的掃描，人類是感覺不出來的。反而形成一種視覺效果，就是一張圖。就像高速旋轉的風扇，你看不到扇葉，只看到了一個圓一樣。
?同理，可以類推到js代碼。在一定時間內，代碼執(zhí)行的次數不一定要非常多。達到一定頻率就足夠了。因為跑得越多，帶來的效果也是一樣。倒不如，把js代碼的執(zhí)行次數控制在合理的范圍。既能節(jié)省瀏覽器CPU資源，又能讓頁面瀏覽更加順暢，不會因為js的執(zhí)行而發(fā)生卡頓。這就是函數節(jié)流和函數防抖要做的事。

?函數節(jié)流：是指一定時間內js方法只跑一次。比如人的眨眼睛，就是一定時間內眨一次。這是函數節(jié)流最形象的解釋。

// 函數節(jié)流
var flag= null;
document.getElementById("throttle").onscroll = function(){if(flag){// 判斷是否已空閑，如果在執(zhí)行中，則直接returnreturn;}flag= true;setTimeout(function(){console.log("函數節(jié)流");flag = false;}, 300);
};

　　

?函數防抖：是指頻繁觸發(fā)的情況下，只有足夠的空閑時間，才執(zhí)行代碼一次。比如生活中的坐公交，就是一定時間內，如果有人陸續(xù)刷卡上車，司機就不會開車。只有別人沒刷卡了，司機才開車。

// 函數防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){clearTimeout(timer); // 清除未執(zhí)行的代碼，重置回初始化狀態(tài)timer = setTimeout(function(){console.log("函數防抖");}, 300);
};  

　　

?

轉載于:https://www.cnblogs.com/MrZouJian/p/8611064.html

總結

以上是生活随笔為你收集整理的经常可能会用到的【函数节流和函数防抖】记录下，做下区分的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。