js节流和防抖

js节流和防抖

1、概念

节流函数是指一定时间内方法只执行一次。
防抖函数是指一定时间内，事件被频繁触发，但只执行一次。
ps：光看概念我自己也一脸懵比，直接上代码。

2、代码的简单实现

（1）节流函数（throttle）

节流函数的实现方法有两种方式：
①利用外部变量

var canRun = true;
window.onresize = function() {
      if (!canRun) {
        return;
      }
      canRun = false;
      setTimeout(function() {
        console.log(1);
        canRun = true;
      }, 300);
};

我们设置了一个外部变量canRun,如果canRun为false，就直接return，反之则打印1.我们设置一个外部变量的目的就是想知道上一次的代码是否运行完，如果运行完就进入下一次的周期，没有的话就直接return.
②利用时间戳

var lastTime = 0;
window.onresize = function() {
      var nowTime = new Date().getTime();
      if (nowTime - lastTime > 500) {
        console.log(1);
        lastTime = nowTime;
      }
};

利用时间戳其实跟上面的差不多，大家自己理解下（奸笑ing。。。）

（2）防抖函数（debounce）

var timer = null;
window.onresize = function() {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(function() {
        console.log(1);
      }, 300);
};

我们可以看到我们设置了一个timer，然后把定时器赋给了timer，如果窗口一直在变化，那么定时器就会一直被清除，而不会运行，只有当你停止变化的时候，才会打印1.

（3）总结

其实看完代码相信大家对节流和防抖应该有一定理解了。如果举个生活中的例子的话，
节流就相当于拧紧水龙头，水一滴一滴的留下来；而防抖的话就像弹簧，我一直按着它，只有当我松开的时候它才会弹起。

3、应用场景

我们平常写代码途中会用到他们的地方有以下几种：
节流：监听窗口变化，滚动，鼠标移动等等
防抖：验证input输入框，当用户停止输入的时候才验证
以上就是小弟给你分享的内容，欢迎来踩！！！