debounce.js
js 防抖是一种用于优化浏览器性能的技术。它通过限制某些频繁的操作,如resize、scroll等事件的触发次数,从而减少浏览器的计算量。
具体原理为:在出发某个事件后,设置一个定时器,并且在规定时间内再次触发该时间,则清除上一个定时器并重新设置新的定时器。这样做的效果是只有在规定时间内没有再次触发事件时才真正执行该操作。
应用场景包括但不限于搜索框实时搜索、拖拽当作时更新位置等。但需要注意的是,防抖会导致某些实时性要求较高的操作失去及时相应的能力,因此需要在具体场景中谨慎选用。
let timeout = null
/**
* 防抖原理:一定时间内,只有最后一次操作,再过wait毫秒后才执行函数
*
* @param {Function} func 要执行的回调函数
* @param {Number} wait 延时的时间
* @param {Boolean} immediate 是否立即执行
* @return null
*/
function debounce(func, wait = 500, immediate = false) {
// 清除定时器
if (timeout !== null) clearTimeout(timeout)
// 立即执行,此类情况一般用不到
if (immediate) {
const callNow = !timeout
timeout = setTimeout(() => {
timeout = null
}, wait)
if (callNow) typeof func === 'function' && func()
} else {
// 设置定时器,当最后一次操作后,timeout不会再被清除,所以在延时wait毫秒后执行func回调方法
timeout = setTimeout(() => {
typeof func === 'function' && func()
}, wait)
}
}
export default debounce
发布时间 : 2023-02-28,阅读量:1264
, 分类:
JavaScript