防抖节流原理及实现（含演示图）

---

前言

随着前端飞速的发展，用户体验也越来越重要。大家在逛一些网站时，会不会手贱，去疯狂的点击某个按钮，但是做了后却发现，网站都是，你点归你点，我动算我输。这其实就是因为做了防抖节流操作啦，为什么这两个东西这么神奇呢？让我们一起探究一下吧。

一、防抖（debounce）

1、什么是防抖？

通俗来说就是当一个事件一直处于频繁触发的情况下，禁止触发，直到频率降低到规定的程度,才允许触发。

效果：短时间内多次触发，最终在停止触发后的某个指定时间执行一次函数-----只执行一次

2、防抖实现

思路：

1. 触发事件时，给一个setTimeout定时器来延迟触发
2. 每次点击清除并重置定时器
3. 使用闭包来存储定时器

代码：

// 防抖
      const debounce = (fn, time) => {
          let timeout = null
          return function() {
              clearTimeout(timeout)
              timeout = setTimeout(() => {
                  fn.apply(this, arguments)
              }, time);
          }
      }

纸上谈兵都是扯淡，接下来让我们测试一下效果：

const input = () => console.log("111");
// 在1000ms也就是1s内连续移动都不会触发事件
div.addEventListener('mousemove', debounce(input, 1000))

效果图：

可以发现我鼠标在移动时一直没有触发事件，直到停止后才触发

二、节流（throttle）

1.什么是节流？

通俗的来说就是一个事件不停的触发时，控制它在每个时间段只触发一次。

效果：短时间内多次触发，即使触发仍在继续也可以根据指定时间触发一次函数----至少执行一次。

2.节流实现

思路：

1. 设置一个变量，限制为true才能进入函数，进入后变为false。
2. 设置setTimeout定时器在规定时间后才能进入执行函数再次触发。
3. 使用闭包存储变量

代码：

const throttle = (fn, time) => {
        let flag = true;
        return function () {
          if (!flag) return;
          flag = false;
          fn.apply(this, arguments);
          setTimeout(() => {
            flag = true;
          }, time);
        };
      };

让我们来测试一下

const input = () => console.log("111");
div.addEventListener("mousemove", throttle(input, 1000));

效果图：

可以看到我鼠标在移动时先触发了一次事件，随后每过1s才再次触发一次事件。

总结

本次的演示就在这啦，思路是非常简单的，希望大家都能动手去敲一敲哟！