防抖与节流

前言

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

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

比如，页面上有一个元素，我们给这个元素（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 timeout
	return function(){
   
		clearTimeout(timeout)
		timeout =