在前端开发的过程中,我们经常会需要绑定一些持续触发的事件,如 resize、scroll、mousemove 等等,但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。通常这种情况下我们怎么去解决的呢?一般来讲,防抖是比较好的解决方案。
/** * 函数防抖 * @param {*} func 函数 * @param {*} wait 延迟执行毫秒数 * @param {*} immediate true 表立即执行,false 表非立即执行 */ let debounce = (func,wait,immediate) => { let timeout; return function () { let context = this; let args = arguments; if (timeout) clearTimeout(timeout); if (immediate) { var callNow = !timeout; timeout = setTimeout(() => { timeout = null; }, wait) if (callNow) func.apply(context, args) } else { timeout = setTimeout(function(){ func.apply(context, args) }, wait); } } } // 调用 $(".box").on('mousemove', throttle(debounce, 1000, true))