js防抖和节流的区别 以及作用

先上代码看看

防抖：

function debounce(fn, delay) {
　　let timer;
　　return function ()  {
　　　　if (timer) { // 如果有正在等待触发的事件，就清除定时器防止多次触发
　　　　　　clearTimeout(timer)
　　　　}
　　　　timer = setTimeout (() => {
　　　　　　fn && fn()
　　　　}, delay)
　　}
}

节流：

function throttle (fn, delay) {
　　let lastTime = 0;
　　return () => {
　　　　let nowDate = Date.now()
　　　　if (nowDate - lastTime > delay) { // 如果当前触发时间减去最后一次触发时间大于需要延迟的事件，就执行事件
　　　　　　lastTime = nowDate；
　　　　　　fn && fn()
　　　　}
　　}
}

　　之前一直不太明白他们的区别到底在哪里，今天大概清楚了所以记录下来。

　　首先看看防抖，先定义了一个timer，在每次调用的时候都会清除这个定时器，比如点击按钮，我们设置delay为1s，第一次点击之后，会等1s之后才执行，但是如果第二次的点击时间在第一次点击后的0.5s，那么就会先清除定时器，也就是说，第一次的点击事件作废，重新进行第二次点击的事件，并且重新计算延迟时间，也就是说两次的点击之后，等到方法执行会等1.5s的时间。所以防抖是保证只执行规定时间内的最新一次。

　　再来看看节流，定义了一个最后一次的触发事件时间，在返回的方法里，获取了当前的时间，判断如果当前时间减去最后一次触发时间大于延迟之间，就把当前时间设置为最后一次触发时间并且执行方法，也就是说，如果你点击了第一次，只需要等1s就会触发事件，1s之内的其他所有点击都无效。所以节流是保证只执行规定时间内的第一次。