JavaScript 截流/防抖函数(2)

1、截流

• 频繁触发,但只在特定的时间内才执行一次代码

复制代码

// 截流函数：调用户在限时内执行1次，限时内再次调用，判断时间，所以它在每个时间段内执行1次 function throttle(fn, delay) { let prev = Date.now(); return function() { const context = this, args = arguments; let now = Date.now(); console.log(now, prev) if (now - prev >= delay) { fn.call(context, args); prev = now; } } } function throttle2(fn, delay) { let timer = null; return function() { const context = this, args = arguments; if (!timer) { timer = setTimeout(() => { fn.call(context, args); timer = null; }, delay || 0) } } }

2、防抖

• 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码

复制代码

// 防抖函数：调用后在一定时间内函数不执行，过了时间限时执行，在限时内再次调用会重新开启定时器 function debounce(fn, delay = 1000) { let timer = null; return function () { const args = arguments; const context = this; if (timer) { clearTimeout(timer); timer = null; } timer = setTimeout(() => { fn.call(context, args) }, delay) }