防抖函数别再瞎写了！教你如何正确纠正this指向及event对象的方法，不再一知半解！

防抖函数别再瞎写了！教你如何正确纠正this指向及event对象！

注：本篇文章用于大家互相交流，如有出错请大家指出，我不是大佬，只是想和大家交流一下！

---

概述

提示：防抖和节流问题对于大家来说已经不陌生了，但是你真的会写防抖函数吗？你了解如何正确纠正 this 和 event 对象的指向问题吗？下面我给大家讲一下防抖函数的实现以及我发现的问题，让大家不再踩坑，自信写出防抖函数！

---

一、防抖函数是什么？

防抖函数：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。用通俗易懂的话来讲，就是你在第一次触发这个事件时，它会启动一个计时器（计时器的时间已经被指定好了），如果在指定时间内你再一次或多次触发这个事件时，每触发一次就会重新启动计时器，所以你多次触发，计时器多次被重置，其实会以最后一次触发的时间为准开始计时，在指定的时间之后发生指定的事件。

---

例子：这就好比一个公交车，司机会在最后一个人上来之后 10 秒关闭车门，第一个人上来，就代表着第一次触发了这个事件，如果之后再没有人上车的话，司机会在 10 秒后关门，也就是执行指定的事件，但是如果有人在这 10 秒中再上车，也就代表着再次触发这个事件，这时计时器就会重置，也就是等这个人上车之后再等 10 秒，司机才会关门，这就是一个对防抖函数一个很好的解释！希望大家能够理解！

二、防抖函数如何写？

提示：这里我区分 ES5 和 ES6 两种方法，是根据 setTimeout 中回调函数的不同写法来区分的，这也是我之后说明 this 和 event 对象指向问题的原因！

1.使用ES5的方法：

代码如下：

/* 防抖函数 (setTimeout回调函数使用 ES5 语法)
 * func：需要执行防抖操作的函数
 * delay：指定定时器的时间
 * timer：代表一个定时器
 */
function debounce(func, delay){
   
    let timer = null;
    return function(