js函式防抖和函式節流

2021-09-11 21:34:26 字數 832 閱讀 1412

函式防抖:就是指觸發事件後在 n 秒內函式只能執行一次,如果在 n 秒內又觸發了事件,則會重新計算函式執行時間。(在頻繁觸發的情況下,只有在停止觸發的時候才會執行)

函式節流:限制乙個函式在一定時間內只能執行一次。

目的:函式防抖和函式節流都是用來優化高頻率執行js**的手段

簡而言之就是在一定時間內,把高頻率執行且效果一樣的js**優化掉

1、函式防抖:

2、 函式節流

實現原理:

//函式防抖

// 函式防抖的要點,也是需要乙個settimeout來輔助實現。延遲執行需要跑的**。

//  如果方法多次觸發,則把上次記錄的延遲執行**用cleartimeout清掉,重新開始。

//  如果計時完畢,沒有方法進來訪問觸發,則執行**

$('.select-input').on('input',function(),1500);

// 函式節流

// 函式節流的要點是,宣告乙個變數當標誌位,記錄當前**是否在執行。

//  如果空閒,則可以正常觸發方法執行。

//  如果**正在執行,則取消這次方法執行,直接return

var canrun = true;

document.getelementbyid("throttle").onscroll = function()

canrun = false;

settimeout(function(), 300);

};

JS函式節流和函式防抖

防抖 debounce 和節流 throttle 都是用來控制某個函式在一定時間內執行多少次的技巧,兩者相似而又不同。背後的基本思想是某些 不可以在沒有間斷的情況下連續重複執行。如果乙個事件被頻繁觸發多次,並且觸發的時間間隔過短,則防抖函式可以使得對應的事件處理函式只執行最後觸發的一次。函式防抖可以...

JS 函式防抖和函式節流

所謂防抖,就是指觸發事件後在 n 秒內函式只能執行一次,如果在 n 秒內又觸發了事件,則會重新計算函式執行時間。function debounce func,wait wait if callnow func.context,args 所謂節流,就是指連續觸發事件但是在 n 秒中只執行一次函式。節流...

js函式防抖和函式節流

js函式防抖和函式節流函式 函式防抖 debounce.js 就是指觸發事件後在 n 秒內函式只能執行一次,如果在 n 秒內又觸發了事件,則會重新計算函式執行時間。函式節流 throttle.js 就是指連續觸發事件但是在 n 秒中只執行一次函式。debounce.js 函式防抖 函式被頻繁呼叫時使...