linno
侠客
侠客
  • 最后登录2020-03-24
  • 发帖数6
阅读:5491回复:0

[js]js防抖

楼主#
更多 发布于:2019-03-28 18:55
在项目中我们很可能会遇到在一段时间连续调用某个函数的问题,但是在有的情况下调用的频率过高,比如说在滚动事件中轻轻的滚动一下便会触发上百次回调,这样回调函数的压力便会变得很大,所以,防抖是一个必要的操作。
那么怎么防抖呢?
基本思路就是使用计时器。
下面直接上代码:

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
}
游客


返回顶部

公众号

公众号