经常可能会用到的【函数节流和函数防抖】记录下,做下区分
今天突然被人問(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)題。
- 上一篇: 第三章| 3.1文件处理
- 下一篇: 2. 尾部的零