前言

在开发中经常遇到一些频发触发的事件，比如说鼠标移动，键盘的输入输出，窗口的缩放，滚动条的运动等等。

下面举个例子来了解事件的频繁触发：

比如，页面上有一个元素，我们给这个元素（id为 container）来绑定鼠标移动事件：

let count = 1
let container = document.getElementById("container")function getUserAction(){container.innerHTML = count++;
}container.onmousemove = getUserAction

这是一段很简单的代码，效果就是随着鼠标在元素上运动而改变元素的内容。虽然在浏览器上不会出现什么卡顿，毕竟逻辑简单啊~~如果换成复杂的逻辑或者异步操作，那么就可怕了。

为了解决这种问题，有两种方案：

1. 防抖
2. 节流

防抖

【原理】：尽管触发了事件，但是不立马执行回调，如果你在一个事件触发的 n 秒内又触发了这个事件，那就以新的事件的事件为准，n 秒后再执行回调，总而言之，就是要等你触发完事件 n 秒内不触发了再执行。

由上面可知，我们就是需要一个函数来延迟执行 DOM 的回调函数，所以立马想到的就是 setTimeout 。

function debounce(fun,wait){let timeoutreturn function(){clearTimeout(timeout)timeout = setTimeout(fun,wait)}
}

所以，开头的例子就可以使用这个防抖函数了：

container.onmousemove = debounce(getUserAction,1000)

一旦这么使用以后，就会扰乱了 this 的指向。在事件的回调函数中，this 指向的是对应的 DOM ，也就是说，需要手动将处理真正业务逻辑的 fun 函数中的 this 指向 DOM 。

function debounce(fun,wait){let timeoutlet context = thisreturn function(){clearTimeout(timeout)timeout = setTimeout(function(){fun.call(context)},wait)}
}

除了 this 以外，还需要注意的是事件对象，同样需要修改：

function debounce(fun,wait){let timeoutreturn function(){let context = thislet args = argumentsclearTimeout(timeout)timeout = setTimeout(function(){fun.call(context,...arguments)},wait)}
}

然后，别忘了返回值：

function debounce(fun,wait){let timeout,resultreturn function(){let context = thislet args = argumentsclearTimeout(timeout)timeout = setTimeout(function(){result = fun.call(context,...arguments)},wait)return result}
}

【总结】：

节流

【原理】：如果持续触发事件，每隔一段时间就执行一次。

节流的实现主要有两种方式：时间戳和定时器。

时间戳节流

当触发事件的时候，取出当前的时间戳，然后减去之前的时间戳，如果大于设置的时间周期，就执行函数，然后更新时间戳；否则不执行。

function(fun,wait){let previous = 0return function(){let now = +new Date()let context = thislet args = argumentsif(now - previous > wait){fun.apply(context,args)previous = now}}
}

定时器节流

当触发事件时，设置一个定时器，再触发事件时，就判断定时器是否存在，存在则不执行。

function(fun,wait){let timeoutlet previousreturn function(){let context = thislet args = argumentsif(!timeout){timeout = setTimeout(function(){timeout = nullfun.apply(context,args)},wait)}}
}