Javascript节流函数

节流函数

原理

如果你持续触发事件，每隔一段时间，只执行一次事件

使用场景

1、鼠标不断点击触发，mousedown(单位时间内只触发一次)

2、window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

示例：

let count = 0
    let div = document.querySelector(".div")
    function throttle(fn, delay) {
        // time变量用于保存setTimeout返回的Id
        let timer = null
        return function () {
            // 判断如果有定时器就return 不再往下执行了 如果没有就设置定时器
            if (timer) {
                return
            }
            timer = setTimeout(() => {
                fn.apply(this)
                timer = null
            }, delay)
        }
    }
    function divChange() {
        count++
        div.innerHTML = count
    }
    let fn1 = throttle(divChange, 1000)
    div.onmouseover = e => fn1()