當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

javascript --- 防抖与节流

發(fā)布時間：2023/12/10 javascript 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 javascript --- 防抖与节流小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

說明

源碼

1. 防抖與節(jié)流

1.1 防抖

防抖: 觸發(fā)事件后,在n秒內(nèi)函數(shù)只執(zhí)行一次
記憶: 你手比較抖,不小心按了按鈕2下…你只希望它只執(zhí)行一次.且按第二次結(jié)束時間算…這就用到了防抖技術(shù)

1.2 節(jié)流

節(jié)流: 連續(xù)發(fā)生的事件,在n秒內(nèi)只執(zhí)行一次函數(shù)

1.3 防抖與節(jié)流的區(qū)別

在一段時間內(nèi),不管觸發(fā)多少次事件,事件處理函數(shù)都只處理一次稱之為節(jié)流
防抖,是在最后一次事件發(fā)生時開始計算,到固定時間觸發(fā)

1.4 準(zhǔn)備工作

準(zhǔn)備一個給定寬、高的盒子,初始化顯示為0.(innerHTML = 0)
當(dāng)鼠標(biāo)移入盒子的時候,觸發(fā)鼠標(biāo)移動事件(box.onmousemove)
鼠標(biāo)移動事件的處理函數(shù): 當(dāng)鼠標(biāo)在盒子中移動的時候,會將一個全局變量(count)加1并寫入盒子中

<!DOCTYPE html> <html lang="en"><head><title>防抖與節(jié)流</title><style>.box {width: 150px;height: 150px;margin: 50px auto;line-height: 150px;text-align: center;border: 1px solid black;font-size: 50px;}</style></head><body><div id="box" class="box">0</div><script>var box = document.getElementById('box')var count = 1box.onmousemove = function() {box.innerHTML = count++}</script></body> </html>

1.5 防抖的實現(xiàn)(先等待在執(zhí)行)

思路:
在事件處理器中放一個延遲執(zhí)行函數(shù)(setTimeout)
每觸發(fā)一次,清除上一次的事件處理函數(shù)(clearTimout)

var box = document.getElementById('box') var count = 1 var timer = null; function debounce() {if (timer) clearTimeout(timer)timer = setTimeout(() => {box.innerHTML = count++;}, 1 * 1000); } box.onmousemove = debounce

1.5.1 防抖的改進

上面的等待時間和處理函數(shù)是靜態(tài)的,封裝成動態(tài)的

1.6 防抖的實現(xiàn)(先執(zhí)行在等待)

描述: 觸發(fā)事件處理函數(shù)的時候,先執(zhí)行一次函數(shù),然后過n秒后再執(zhí)行
思路:

由于核心是異步函數(shù)(setTimeout)的清除.

用一個flag函數(shù)記錄當(dāng)前定時器的狀態(tài),如果定時器為空則代表執(zhí)行

function debounce(handUp, fn) {// 進來的時候設(shè)置為nullvar timer = nullreturn function() {if (timer) clearTimeout(timer)var flag = !timertimer = setTimeout(() => {timer = null}, handUp)if (flag) fn.apply(this, arguments)} }

1.7 節(jié)流的實現(xiàn)

描述: 在給定時間內(nèi),無論時間處理函數(shù)觸發(fā)多少次都只執(zhí)行一次
思路:

1.根據(jù)timer是否為空,如果為空則執(zhí)行一次.

2.在給定時間后,將定時器的序號timer清空.讓它可以重新執(zhí)行

function throttle(handUp, cb){var timer = null;return function(){if(!timer){timer = setTimeout(()=>{cb.apply(this);timer = null;}, handUp)}} }

1.8 節(jié)流的實現(xiàn)(不使用定時器)

觸發(fā)的第一次的時候,先記錄第一次執(zhí)行的時間(last)
觸發(fā)然后隨著函數(shù)不斷觸發(fā),得到第一個時間間隔大于給定時間的環(huán)境.
觸發(fā)給定的函數(shù),然后將last設(shè)置為當(dāng)前時間

function throttle(handUp, cb){var last = 0;return function(){var now = Date.now();if(now - last > handUp){last = now;cb.apply(this);}} }

總結(jié)

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

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

上一篇： python postgresql跨数据
下一篇： javascript --- js中的