js函式防抖和函式節流

2021-10-10 05:28:04 字數 2248 閱讀 5024

js函式防抖和函式節流函式

函式防抖(debounce.js):就是指觸發事件後在 n 秒內函式只能執行一次,如果在 n 秒內又觸發了事件,則會重新計算函式執行時間。

函式節流(throttle.js):就是指連續觸發事件但是在 n 秒中只執行一次函式。

debounce.js

/**

* 函式防抖

* 函式被頻繁呼叫時使用

* 使用方法參考lodash 的 debounce 函式

* @author lzs

*/const freeglobal = typeof global == 'object' && global !== null && global.object === object && global

/** detect free variable `self`. */

const freeself = typeof self == 'object' && self !== null && self.object === object && self

/** used as a reference to the global object. */

const root = freeglobal || freeself || function('return this')()

function isobject(value)

/** * 防抖函式

* @param func 執行的函式

* @param wait 函式執行的延時 時長

* @param options

*/function debounce(func, wait, options)

wait = +wait || 0

if (isobject(options))

function invokefunc(time)

function starttimer(pendingfunc, wait)

return settimeout(pendingfunc, wait)

} function canceltimer(id)

cleartimeout(id)

} function leadingedge(time)

function remainingwait(time)

//根據時間判斷 func 能否被執行

function shouldinvoke(time)

function timerexpired()

// restart the timer.

timerid = starttimer(timerexpired, remainingwait(time))

} function trailingedge(time)

lastargs = lastthis = undefined

return result

} function cancel()

lastinvoketime = 0

lastargs = lastcalltime = lastthis = timerid = undefined

} function flush()

function pending()

function debounced(...args)

if (maxing)

}if (timerid === undefined)

return result

} debounced.cancel = cancel

debounced.flush = flush

debounced.pending = pending

return debounced

}export default debounce

節流函式

throttle.js

import debounce from './debounce.js'

function isobject(value)

function throttle(func, wait, options)

if (isobject(options))

return debounce(func, wait, )

}export default throttle

JS函式節流和函式防抖

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

js函式防抖和函式節流

函式防抖 就是指觸發事件後在 n 秒內函式只能執行一次,如果在 n 秒內又觸發了事件,則會重新計算函式執行時間。在頻繁觸發的情況下,只有在停止觸發的時候才會執行 函式節流 限制乙個函式在一定時間內只能執行一次。目的 函式防抖和函式節流都是用來優化高頻率執行js 的手段 簡而言之就是在一定時間內,把高...

JS 函式防抖和函式節流

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