防抖与节流

1、防抖是指防止反复而频繁地触发事件而设置的，对于设置了防抖的事件而言，只有结束了操作后经过指定时间才会触发，也就是说只在最后一次触发时，再经过一段时间才会触发。具体操作与代码如下：

//防抖debounce代码：
function debounce(fn) {
    let timeout = null;
    return function () {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            fn();
        }, 500);
    };
}

首先让我们来一行一行分析代码，

1、let timeout = null;这里是声明一个timeout来存放定时器；

2、clearTimeout(timeout)是要把timeout里面存放的定时器清除；

3、timeout=setTimeout(()=>{},500)这里是给timeout重新存放一个定时器，在500毫秒之后触发里面的fn()函数，

4、如果在500毫秒内再次触发debounce函数，则会把上一次的定时器清除，然后重新添加一次新的定时器，重新计时，直到最后一次操作后500毫秒才会触发fn函数。

应用场景：

1、用户输入框，在用户输入最后一个字符时经过500毫秒就运行函数，减少反复运行的消耗

2、屏幕滚动，当用户滚动屏幕并停止后，经过500毫秒就运行函数；

二、节流

节流是指在高频繁触发的事件里面，只能每隔一段时间才能触发一次，与防抖的区别在于可以多次触发，而防抖只能在最后一次操作后才能触发

节流代码如下：

function thorttle(time, fn) {
            var timer = 0;
            return function() {
                let nowTime = new Date().getTime()
                if (nowTime - timer >= time) {
                    fn()
                    timer = nowTime;
                }
            }
        }

我们再一行一行分析代码

1、var time= null; time用来记住上一次触发的时间

2、let nowTime = new Date().getTime() 设置一个nowTime用来记录现在的时间；

3、判断现在与上一次触发的时间是否大于time；

4、若大于time，则触发fn函数；并重新赋值给timer现在触发的时间；

应用：

在频繁的触发里面，每隔一段时间就触发一次真正的处理函数。