什么是节流和防抖

1. 防抖

• 定义：防抖指的是连续触发事件，但是在设定的时间内只执行最后一次。可以理解为连续触发一个事件，每次触发之后都重新开始执行。
• 应用场景：
  • 搜索框搜索：不能每次输入的时候都发送一次请求，这样会很频繁，所以需要防抖来限制，设定一个时间，在规定时间内如果连续触发输入，那也只是执行最后一次触发输入发送请求。
  • 文本编辑器实时保存：不一定每次输入都需要保存，可以利用防抖在一定时间，多长时间之后再进行保存。
  • ……
• 实现思路：

let timer = null; //先定义个存放定时器的变量

// 假设键盘弹起就发送请求
document.querySelector('input').onkeyup = () => {
    // 防抖操作：如果键盘弹起时定时器不为null则先清除定时器，再重新开始执行一个新的定时器。
    if(timer !== null){
        clearTimeout(timer);
    }
    
    timer = setTimeout(() => {
        // 请求操作
    }，1000)
}

2.节流

• 定义：节流是指连续触发事件但是在设定的时间内只执行一次。可以理解为连续触发一个事件，但是只有执行完第一次请求之后，才会重新发送新的请求。
• 应用场景：
  • 快速点击、鼠标滑动、scroll事件、下拉加载等等：这种高频触发事件一般都得响应完一次请求后再接着发送下一轮请求。
  • ……
• 实现思路：

let timer = null; //先定义个存放定时器的变量

// 假设鼠标悬浮就触发事件
document.querySelector('input').mouseover = () => {
    // 节流操作：如果鼠标多次悬浮触发事件，当timer已经被触发执行，那就直接return返回；
    // 只有等触发事件执行完成timer = null时再重新发送请求。
    if(timer !== null){
        return;
    }
    
    timer = setTimeout(() => {
        // 请求操作（触发事件逻辑代码）
        
        timer = null;
    }，1000)
}

总结