當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

javascript --- 防抖与节流

發布時間：2023/12/10 javascript 25 豆豆

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

說明

源碼

1. 防抖與節流

1.1 防抖

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

1.2 節流

節流: 連續發生的事件,在n秒內只執行一次函數

1.3 防抖與節流的區別

在一段時間內,不管觸發多少次事件,事件處理函數都只處理一次稱之為節流
防抖,是在最后一次事件發生時開始計算,到固定時間觸發

1.4 準備工作

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

<!DOCTYPE html> <html lang="en"><head><title>防抖與節流</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 防抖的實現(先等待在執行)

思路:
在事件處理器中放一個延遲執行函數(setTimeout)
每觸發一次,清除上一次的事件處理函數(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 防抖的改進

上面的等待時間和處理函數是靜態的,封裝成動態的

1.6 防抖的實現(先執行在等待)

描述: 觸發事件處理函數的時候,先執行一次函數,然后過n秒后再執行
思路:

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

用一個flag函數記錄當前定時器的狀態,如果定時器為空則代表執行

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

1.7 節流的實現

描述: 在給定時間內,無論時間處理函數觸發多少次都只執行一次
思路:

1.根據timer是否為空,如果為空則執行一次.

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

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

1.8 節流的實現(不使用定時器)

觸發的第一次的時候,先記錄第一次執行的時間(last)
觸發然后隨著函數不斷觸發,得到第一個時間間隔大于給定時間的環境.
觸發給定的函數,然后將last設置為當前時間

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

總結

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

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

上一篇： python postgresql跨数据
下一篇： gradle idea java ssm