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 秒中只執行一次函式。節流...