防抖（前端）
前言：
在前端开发中有一部分的用户行为会频繁的出发事件执行，而对于DOM操作、资源加载等耗费性能的处理，很可能导致界面卡顿，甚至浏览器的崩溃。函数防抖（debounce）就是为了解决类似需求应用而生的。（写给新手，最终代码在最下方，请一步一步看）
解释：
函数防抖就是在函数需要频繁出发情况时，只有足够空闲的时间，才执行一次，好像公交司机等人都上车后才出站一样。
弄清楚什么是防抖？
- 比如说我们现在要实现一个需求：利用input框实现一个实时搜索，我们怎么做？废话不多说，我们一步一步来。
输入值时，每按一个键，控制台就会输出当前input框里面的值。如果要是简单的获取值，那这就可以了，但是在我们实际开发中，不仅仅是获取值，比如上述提到的，实时搜索，要拿当前值去调后端接口，如果不进行防抖处理那么我们每输入一个值就会去调一次接口，不停发送请求，造成资源浪费。那么下一步我们想办法让它输入完毕之后再去发送请求，这里我们使用setTimeout来处理。
这里我们延迟1秒来输出input里的值。是不是就达到了我们的预期？但他并不完美，我们再进行处理。
我们利用apply方法修改**_ajax**函数this指向，同时将oninput事件函数的实际参数列表数组作为第二个参数传递过去，这时候我们既可以拿到当前函数的事件对象，也可以进行防抖处理。但是这仍不是最终我们想要的结果，在实际开发中，我们不仅仅只有ajax请求操作，所以我们下一步将它封装成一个更灵活的防抖方法。
这个时候我们就可以来更换执行函数了和延迟时间了。
以下是代码：
// 首先获取DOMvar oInput = document.getElementById('debounce')// 假设这是一个Ajax请求function _ajax(e) {// 我们这里打印当前input的value值; e为事件对象console.log(e, this.value)}/**handler: 执行函数delay：延迟时间*/function debounce(handler, delay) {// 声明一个变量来存放定时器let _timer = nullreturn function () {var _self = this// 执行前，先清除定时器clearTimeout(_timer)// arguments是一个函数的实际参数列表var argu = arguments_timer = setTimeout(function () {handler.apply(_self, argu)}, delay)}}// 我们给input框绑定一个input事件oInput.oninput = debounce(_ajax, 500)
重要提示：这只是个例子，一定要自己手敲一遍，印象深刻。毕竟我们都是有梦想的程序员
