JS防抖与节流的实现示例

防抖:

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

//防抖 ES6语法
<body>
    <input type="text">
    <script>
        let ipt = document.querySelector("input");

        // debounce 闭包函数
        // callback 回调函数
        // delay 延时时间
        const debounce = (() => {
            let time = null;//接受定时器
            return (callback,delay) => {
                time && clearTimeout(time);
                time = setTimeout(callback, delay);
            }
        })();
        
        //input输入事件
        ipt.addEventListener('input', () => {
            debounce(() => {
                console.log(ipt.value);
            },1500);
        });
    </script>
</body>

节流:

在事件被触发n秒后再执行回调。

//节流 ES6语法
<body>
    <input type="text" value="mango">
    <button id="btn">提交</button>
    <script>
        let ipt = document.querySelector("input");
        let btn = document.querySelector("#btn");
        
        // throttle 闭包函数
        // callback 回调函数
        // delay 延时时间
        const throttle = (() => {
            let lasttime = 0;//接受上一次触发时间
            return (callback,delay) => {
                let nowtime = new Date();//当前时间戳
                if(nowtime - lasttime > delay){
                    callback();
                    lasttime = nowtime;
                }
            }
        })();
        
        //点击事件
        btn.addEventListener('click', () => {
            throttle(() => {
                console.log(ipt.value);
            },1500);
        });
    </script>
</body>

JS防抖与节流的实现示例

防抖:

节流:

悦读