109-js-25-手写throttle

概述

当拖拽事件执行时,频率太快,减少事件的执行次数,以一个固定频率来执行。

示例

const div1 = document.getElementById('div1')

let timer = null
div1.addEventListener('drag', function (e) {
    if (timer) {
        return
    }
    timer = setTimeout(() => {
        console.log(e.offsetX, e.offsetY)

        timer = null
    }, 100)
})
const div1 = document.getElementById('div1')

// 节流
function throttle(fn, delay = 100) {
    let timer = null

    return function () {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

div1.addEventListener('drag', throttle(function (e) {
    console.log(e.offsetX, e.offsetY)
}))

apply

div1.addEventListener('drag', function(event) {

})

fn.apply(this, arguments):由上述代码可知,arguments参数是传递到throttle返回的函数中的,所以需要将参数传递给fn