认识防抖和节流

一、防抖（debounce）

1.定义：防抖，顾名思义就是防止抖动。就是指连续触发事件但是在设定的一段时间内只执行最后一次。我们可以设定一个间隔时间来定义是否频繁，如果此次事件距离上次事件触发的间隔少于我们所设定的时间，则认定为频繁操作。（记忆方法：重新开始）

例子：设定了1000毫秒执行，当你触发事件了，他会1000毫秒后执行，但是当时间还没到1000毫秒的时候你触发了事件，1000毫秒将重新计时。计时结束后，才会执行事件。

2.特点：当事件快速连续不断触发时，动作只会执行一次。但是这又分为了两种防抖

• 前缘debounce：当事件被触发，执行动作在前，然后设定周期，周期内有事件触发，重置间隔时间，且不执行动作。

• 延迟debounce：当事件被触发，设定一个周期延迟执行动作，若周期内被再次触发，则重置间隔时间，直到周期结束，执行动作。
  
  

3.应用场景：

• 输入框中频繁的输入内容。搜索，或者提交信息
• 监听浏览器的滚动事件
  
  

4.实现

function debounce(fn,time){
    let timer = null;

    return function(){
        let args = arguments;
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        // 设置定时器，使事件间隔制定时间后执行
        timer = setTimeout(() => {
            fn.apply(this,args)
        }, time);
    }
}

二、节流（throttling）

1.定义：节流是指如果连续触发某个事件，但是在设定的时间段只执行一次。（记忆方法：不要打断我）

例子：设定1000毫秒执行，那你在1000毫秒内不管触发几次，也只在1000毫秒后执行一次。

2.特点：每个时间周期内，不管触发多少次事件，也只执行一次动作。当上一个时间周期结束后，又有事件触发时，开始下一个时间周期，同样在周期内只执行一次动作。节流策略同样又分为两种：前缘和延迟节流，类似防抖

3.应用场景：

• 鼠标移动事件
• 表单的提交按钮
• 用户频繁点击按钮后的操作
• 游戏的设计：类似王者荣耀的攻击键，英雄的攻击速度并不会因为你一秒可以点击攻击键100次而攻击100次。攻击行为有一定的频率进行攻击即使你按的再快。
  （可能不准确，但是我是这么理解的）
  
  

4.实现

function throttle(fn,delay) {
    let curTime = Date.now();
    
    return function(){
        let args = arguments;
        let nowTime = Date.now();

        if (nowTime - curTime >= delay) {
            curTime = Date.now();
            return fn.apply(this,args)                    
        }
    }
}

最后，建议使用第三方库lodash库，利用里面的debounce（防抖）和throttle（节流）写代码更简单高效。