函数的防抖与节流

一、函数防抖

（一）防抖的理解

防抖就是将所有的触发都取消，在规定的时间结束过后才会执行最后一次，也就是说连续快速的触发只会执行最后一次结果。

也可以理解为游戏里的回城按钮，每点一下就会重新刷新回城进度，永远以最后一次点击为准。

例如：我们现在有一个输入框，在没有使用防抖的情况下，我们输入一个字符就会给服务器发送一次请求。

但是我们使用防抖过后，我们只会发送最后一次输入事件触发的请求。

（二）使用JS实现防抖

防抖可以使用定时器+闭包实现

关于闭包可以看这个MDN上的教程：

闭包 - JavaScript | MDN (mozilla.org)

防抖其本质就是用户每执行一次输入操作就开启一个定时器，如果用户继续输入，就把前面的定时器全部清除，永远只留下最后一个定时器。

const ipt = document.querySelector("input");
// 触发输入框输入事件
ipt.addEventListener('input', debounce(() => {
    console.log("向服务器发送一次请求，内容为" + ipt.value);
}, 1000));

// 防抖函数，接收两个参数
// 一个是事件回调函数，一个是指定最后一次触发时间
function debounce(fn, delay) {
    // 定时器，使用闭包将它缓存在内存中
    let t = null;
    return function () {
        // 如果这次输入的时候检测到已经开启了定时器，就清除上一个定时器
        if (t !== null) {
            clearTimeout(t);
        }
        // 重新开启新的定时器，该定时器永远是最后一个定时器
        t = setTimeout(() => {
            // 等到定时器结束触发事件回调函数
            fn();
        }, delay)
    }
}

（三）使用Lodash实现防抖

首先需要下载和引入lodash，下面是下载Lodash的官方网址：

Lodash 简介 | Lodash中文文档 | Lodash中文网 (lodashjs.com)

这一条讲的是防抖函数的使用：

lodash.debounce | Lodash中文文档 | Lodash中文网 (lodashjs.com)

_.debounce(回调函数, 延迟时间)

const ipt = document.querySelector("input");
ipt.addEventListener('input', _.debounce(() => {
   console.log("向服务器发送请求，请求数据为：" + ipt.value);
}));

二、函数节流

（一）节流的理解

节流就是在规定的时间间隔内不会重复触发回调，只有过了这个时间间隔后才能触发回调，使用这种方法把触发频率变为少量触发。

可以理解为我们平时输入手机号获取验证码，获取验证码过后，用户在短时间内不能再获取验证码，只有等这个时间过了才能再次发送验证码。

（二）使用JS实现节流

节流也是使用定时器+闭包来实现

其本质就是使用一个变量来记录当前状态，如果我们在触发事件的时候这个变量状态是可以触发，就开启一个定时器后变为不可触发，等待定时器结束后再把状态改为可以触发。

let num = 0;
const span = document.querySelector("span");
const button = document.querySelector("button");
// 触发点击按钮num+1事件
button.addEventListener("click", throttle(() => {
    num++;
    span.innerText = num;
}, 2000))

// 节流函数，接收两个参数
// 一个是事件回调函数，一个是指定触发事件的间隔时间
function throttle(fn, delay) {
    // 记录当前事件状态，true为可以触发，false为不可触发
    let t = true;
    return function () {
        // 如果这次事件可以触发，就执行回调函数并开启一个定时器，然后将状态变为false
        // 如果点击的时候事件不可触发，则状态一直为false
        if (t) {
            fn();
            setTimeout(() => {
                // 等到定时器结束触发事件回调函数，并重新把状态调为true
                t = true;
            }, delay)
        }
        t = false;
    }
}

（三）使用Lodash实现节流

Lodash官方文档中节流函数的使用：

lodash.throttle | Lodash中文文档 | Lodash中文网 (lodashjs.com)

_.throttle(回调函数, 时间间隔)

let num = 0;
const span = document.querySelector("span");
const button = document.querySelector("button");
button.addEventListener("click", _.throttle(() => {
    num++;
    span.innerText = num;
}, 2000))