节流与防抖的讲解与其封装

本文讲解一下节流和防抖的原理，和简单的使用。然后做一下节流与防抖的封装。

目录

前言

节流与防抖的原理

节流：

解释：

防抖：

解释：

节流的封装

防抖的封装

---

前言

比如说我们写一个监听事件去监听鼠标在div里面的移动，或者监听滑块的移动，监听到变化就会触发函数。那么我们随便移动一下鼠标，拖动一下滑块，就会频繁触发函数去执行，执行几十甚至上百次。节流与防抖就是想办法，既能监听事件去执行函数，又可以避免频繁执行函数。

节流与防抖的原理

我们可以使用定时器来实现节流与防抖。

节流：

节流：就是减少函数的执行频率，一定时间内就执行一次。

比如说我写一个按钮，点击这个按钮就打印输出数字。每点击一下按钮，点击事件内的函数，函数内定义的变量num就要自增1，点击10次后，打印输出的就会是1.

而我不停的点击，在每隔一秒也会打印一次数字。

如下：

let btn = document.querySelector("button");
    let flag = true,
        number = 0;
    btn.onclick = function() {
        if (flag) {
            flag = false;
            number++;
            setTim