防抖和节流 | 小聂子客栈

一直以为这么高端的两个名字，实际意义理解起来也很难。
然而几行代码已经足以概况，或许项目中已经运用而不自知。

防抖

概况：在事件触发后一定时间再执行，这段时间内再次触发事件就重新计时。

function debounce(fn){
    let timer = null;
    return function(){
        // 触发时重置
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, arguments)
        }, 500)
    }
}

监听一个输入框连续输入不触发，停止输入后进行搜索

let bounceInput = document.getElementById("DeBounce");
bounceInput.addEventListener("input", debounce(function(){
    console.log("debounce success!")
}))

节流

概况：在一定时间内无论触发多少次事件都只执行一次。

function throttle(fn){
    // 当前是否可触发
    let isOpen = true;
    return function(){
        if(!isOpen) return;
        isOpen = false;
        setTimeout(() => {
            fn.apply(this, arguments);
            isOpen = true;
        }, 500)
    }
}

监听窗口大小变化在一定时间内只触发一次，避免高频执行

1
2
3

window.addEventListener("resize", throttle(function(){
    console.log("throttle success~")
}))

Tags: javascript

← Share Time ~（第五期）收藏CSS：Hover下划线收缩、蛇形边框 →

扫描二维码，分享此文章