概念描述
- 高阶函数，传入一个函数，返回一个函数。
- 在持续时间 n 的操作下，每间隔时间 delay ，就执行一次回调, n > delay。n < delay 时，delay 时间后也会执行一次回调。
- 回调函数执行需要绑定 this 和传参。
代码实现
/**
* @description: throttle
* 1、高阶函数，传入一个函数，返回一个函数。
* 2、在持续时间 n 的操作下，每间隔时间 delay ，就执行以下回调, n > delay。n < delay 时，delay 时间后也会执行以下回调。
* 3、回调函数执行需要绑定 this 和传参。
* @author: huen2015
*/
function throttle(fn: Function, delay: number = 300): EventListenerOrEventListenerObject | any {
let timer: any = null
return function (this: any, ...args: any[]) {
if (timer) return
timer = setTimeout(() => {
fn.apply(this, args)
clearTimeout(timer)
timer = null
}, delay)
}
}
const throttleDom = document.querySelector('#throttle')
if (throttleDom) {
// Event - UIEvent - MouseEvent - PointerEvent
throttleDom.addEventListener('click', throttle(function (this: any, e: PointerEvent) {
console.log('throttle - 节流')
console.log('this', this)
console.log('e', e)
}))
}
应用场景
-
鼠标点击触发，mousedown（单位时间内只触发一次）
-
滚动事件，滑到底部自动加载更多。
