js事件防抖

先上代码

var onOff = true

document.onclick = function () {
    // onOff === true时才运行函数
    if (onOff) {
        onOff = false // 把onOff值改为false,点击间隔过短就无法运行函数
        console.log('输出')
        setTimeout(function() {
            onOff = true // 1秒钟后onOff等于true
        }, 1000)
    } else {
        console.log('点击过快')
    }
}

适用于一些不需要频繁激活的事件或者事件绑定的函数比较复杂，比如输入框输入事件，鼠标移动事件等。

• 下边是我随便封装的一个函数

var preventTooMuch = function (elm, type, fun, interval) {
    let onOff = true
    elm.addEventListener(type, function() {
        if (onOff) {
            onOff = false
            fun()
            setTimeout(function() {
                onOff = true
            }, interval)
        } else {
            // 也可以写一个操作过快的处理函数
            console.log('操作过于频繁')
        }
    })  
}

preventTooMuch(document, 'click', function() {
    console.log(233)
}, 1000)