函数防抖与函数节流

函数防抖和函数节流的相同点：

1.都可以通过setTimeout来实现

2.目的都是为了减少回调执行频率

不同点：

1.函数防抖，在一段连续操作结束后，处理回调，利用 clearTimeout 和 setTimeout 实现，例如做公交车，需等最后一个人上车后才关门。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能，例如进地铁阀门，进入3s后关闭，等下个人进入。

2.函数防抖关注一定时间连续触发，只在最后执行一次，而函数节流侧重于一段时间内只执行一次。

函数防抖的应用场景：连续的事件，只需触发一次回调

搜索框输入，只需用户最后一次输入完，再发送请求

手机号，邮箱验证输入检测

窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

<input type="text" id="input">
<script>
    // 简单的防抖动函数
    function debounce(func, wait) {
        let timeout;  // 定时器变量
        return function() {
            clearTimeout(timeout);  // 每次触发时先清除上一次的定时器,然后重新计时
            timeout = setTimeout(func, wait);  // 指定 xx ms 后触发真正想进行的操作 handler
        };
    }
    //事件处理程序
    function realFunc(){
        console.log("Success");
    }

    const input = document.getElementById('input');
    input.addEventListener('keydown',debounce(realFunc,500));
    //input.addEventListener('keydown',realFunc);
</script>

函数节流的应用场景：间隔一段时间执行一次回调的场景

滚动加载，加载更多或滚到底部监听

谷歌搜索框，搜索联想功能

高频点击提交，表单重复提交

<script>
    //节流函数
    function throttle(func,interval){
        let timeout;
        let startTime = new Date();
        return function (){
            clearTimeout(timeout);
            let curTime = new Date();
            if(curTime - startTime <= interval){
                //小于规定时间间隔时，用setTimeout在指定时间后再执行
                timeout = setTimeout(()=>{
                    func();
                },interval)
            } else {
                //重新计时并执行函数
                startTime = curTime;
                func()
            }
        }
    }
    //事件处理程序
    function realFunc(){
        console.log('success')
    }
    window.addEventListener('scroll',throttle(realFunc,100));
    //window.addEventListener('scroll',realFunc);
</script>

原文：https://blog.csdn.net/qq_37860930/article/details/83505547
版权声明：本文为博主原创文章，转载请附上博文链接！