【js】关于手写防抖的时候用到闭包的问题

写在最后啦

问题

鼠标在盒子上移动，鼠标停止之后，500ms后里面的数字就会变化+1；

结构和样式：

<div class="box"></div>

 .box {
        width: 500px;
        height: 500px;
        background-color: #ccc;
        color: #fff;
        text-align: center;
        font-size: 100px;
      }

两个写法：

自己的思路：

一溜下来的，应该算是面向过程吧：

      let i = 0;
      let timer = null;
      document.querySelector(".box").addEventListener("mousemove", () => {
        if (timer) clearTimeout(timer);
        timer = setTimeout(function () {
          document.querySelector(".box").innerHTML = ++i;
        }, 500);
      });

资料上的：

应该是和Lodash一样的思路吧：

// 获取元素
const box = document.querySelector(".box");
let i = 1;
// 数字处理函数
function mouseMove() {
    box.innerHTML = i++;
}
// 防抖函数
function debounce(fn, t = 500) {
    let timeId;
    return function () {
        // 如果有定时器，先清除
        if (timeId) clearTimeout(timeId);
        // 开启新的定时器

        timeId = setTimeout(fn, t);
    };
}
// 监听鼠标移动事件
box.addEventListener("mousemove", debounce(mouseMove, 500));

我们可以看到 防抖函数中用return返回的函数，因为addEventListener里面那个事件执行的函数debounce(mouseMove, 500)是先自己执行了再返回的值作为函数执行。

事件里直接执行函数的，直接一个函数名那种，这个debounce(mouseMove, 500)是自己执行了，返回的东西被当做函数执行的，所以是加上return，同时debounce这个外层函数里有个let timeId要被内层函数使用，用闭包好使啊。