js防止事件激發過於頻繁

冰影浴火發表於2018-01-02
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)
複製程式碼

相關文章