|
在项目中我们很可能会遇到在一段时间连续调用某个函数的问题,但是在有的情况下调用的频率过高,比如说在滚动事件中轻轻的滚动一下便会触发上百次回调,这样回调函数的压力便会变得很大,所以,防抖是一个必要的操作。
那么怎么防抖呢? 基本思路就是使用计时器。 下面直接上代码: function debounce(func, wait, immediate) { let timeout, args, context, timestamp, result const later = function() { // 据上一次触发时间间隔 const last = +new Date() - timestamp // 上次被包装函数被调用时间间隔last小于设定时间间隔wait if (last < wait && last > 0) { timeout = setTimeout(later, wait - last) } else { timeout = null // 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用 if (!immediate) { result = func.apply(context, args) if (!timeout) context = args = null } } } return function(...args) { context = this timestamp = +new Date() const callNow = immediate && !timeout // 如果延时不存在,重新设定延时 if (!timeout) timeout = setTimeout(later, wait) if (callNow) { result = func.apply(context, args) context = args = null } return result } |
|