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

?

一、概念解釋

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

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

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

　　

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

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

　　

?

轉(zhuǎn)載于:https://www.cnblogs.com/MrZouJian/p/8611064.html

總結(jié)

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

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