戳藍(lán)字"Web前端嚴(yán)選"關(guān)注我們哦！

手寫(xiě)防抖和節(jié)流

1.引言

「防抖和節(jié)流的產(chǎn)生」

瀏覽器的resize、scroll、keypress、mousemove操作時(shí)會(huì)頻繁觸發(fā)，如果我們?cè)诨卣{(diào)中計(jì)算元素位置、做一些跟DOM相關(guān)的操作，引起瀏覽器回流和重繪，頻繁觸發(fā)回調(diào)，很可能會(huì)造成瀏覽器掉幀，甚至?xí)篂g覽器崩潰，影響用戶(hù)體驗(yàn)。針對(duì)這種現(xiàn)象，目前有兩種常用的解決方案：防抖和節(jié)流。

2.防抖

function?debounce(fn,delay){
?let?timer?=?null;
?return?function(){
??clearTimeout(timer);
??timer?=?setTimeout(function(){
???fn.call(this,...arguments)
??},delay)
?}
}

防抖：多次事件觸發(fā)，只執(zhí)行一次

舉例形容一下，就是得帕金森的手去拿一杯水，雖然手抖動(dòng)很多次，但是拿水的動(dòng)作只執(zhí)行一次

body.onscroll?=?debounce(function(){
?console.log("防抖")
},1000)

3.節(jié)流

function?throttle(fn,delay){
?let?start?=?Date.now();
?return?function(){
??let?last?=?Date.now();
??if(last?-?start?>?delay){
???fn.apply(this,arguments);
???start?=?last;
??}
?}
}

節(jié)流：事件觸發(fā)，固定時(shí)間內(nèi)執(zhí)行一次

舉例形容一下，就是水管每小時(shí)流2立方米水，節(jié)流減少到每小時(shí)流1立方米水

body.onscroll?=?throttle(function(){
?console.log("節(jié)流")
},1000)

?? 感謝大家

如果你覺(jué)得這篇內(nèi)容對(duì)你挺有有幫助的話(huà)：

點(diǎn)贊支持下吧，讓更多的人也能看到這篇內(nèi)容(收藏不點(diǎn)贊，我就嚶嚶嚶 -_-)

關(guān)注公眾號(hào)【W(wǎng)eb前端嚴(yán)選】，定期為你推送好文。

添加個(gè)人微信，進(jìn)群與小伙伴一起玩耍(已經(jīng)推出)~

點(diǎn)個(gè)在看，大家都看?

總結(jié)

以上是生活随笔為你收集整理的防抖 节流_面试必备考点：防抖与节流的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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