节流和防抖的简单示例代码

节流

含义

可以限制函数的执行频率，避免过多的重复操作，提升页面的响应速度。

函数在 n 秒内只执行一次，如果多次触发，则忽略执行。

应用场景：

• 拖拽场景
• 滚动
• 调整窗口大小

示例

function throttle(func,delay){
    let timer=null;
    return function(){
        if(!timer){
            timer=setTimeout(()=>{
                func.apply(this,arguments);
                timer=null;
            },delay)
        }
    }
}

防抖

含义

将多次高频率触发的函数执行合并成一次，并在指定的时间间隔后执行一次。
函数在 n 秒后再执行，如果 n 秒内被触发，重新计时，保证最后一次触发事件 n 秒后才执行。

应用场景：

• 输入框搜索
• 表单提交按钮
• 轮播图切换

示例

function debounce(func,delay){
    let timer=null;
    return function(){
        clearTimeout(timer);
        timer=setTimeout(()=>{
            func.apply(this,arguments)
        },delay)
    }
}