day169-手写debounce

题目

手写防抖函数debounce
防抖和节流的区别:
防抖:一定时间内只执行最后一次(非立即执行),如:window触发resizesearch搜索联想。
节流:一定时间内只执行一次,如:多次连续点击按钮,防抖只执行一次;rAF

debounce

function debounce(func, wait, immediate) {
let timeout, args, ctx, timestamp, result

const later = function () {
// 距离上一次触发时间间隔
const last = +new Date() - timestamp
// wait: 当前时间间隔;lat:上次被包装函数调用的时间间隔
if (wait > last && last > 0) {
// 继续等待一定时间执行
timeout = setTimeout(later, wait - last)
} else {
// 超过约定的时间
timeout = null
// 前提是没有设置立即执行
if (!immediate) {
// 可以立即执行
result = func.apply(ctx, args)
// 第一次执行完毕,重置各种条件
if (!timeout) ctx = args = null
}
}
}

return function (...args) {
ctx = this
timestamp = +new Date()
const callImmediate = immediate && !timeout
// 非立即执行
if (!timeout) {
timeout = setTimeout(later, wait)
}
// 立即执行
if (callImmediate) {
result = func.apply(ctx, args)
ctx = args = null
}
return result
}
}
文章作者: lmislm
文章链接: http://lmislm.com/2019/07/01/2019-07-01/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog