前端优化 —— 函数的节流和防抖

阅读原文

前言

在前端开发当中我们经常会绑定一些事件触发的某些程序执行，有时这些事件会连续触发，如浏览器窗口 scroll、resize，输入框的 keyup、input，以及 click 事件在连续点击时连续发送请求等等，这些情况有些会严重影响前端性能，有些会增加服务器压力，使用户体验大打折扣，而函数节流和防抖就是为了解决这样的问题。

函数节流 throtter

函数节流：当持续发生事件时，保证在一个固定的时间间隔只执行一次真正的事件处理程序，通俗的说就像 “节流” 的名字一样，打开水龙头时要秉承勤俭节约的原则，把阀门关小，最好是达到在固定间隔内水一滴一滴的往下流。

1、节流函数的时序图

前端优化 —— 函数的节流和防抖

从图中可以看出，连续触发事件时，真正执行事件处理程序的间隔是固定的，多次触发，也只会在某一个时间间隔内触发一次，由于事件处理函数内部执行逻辑各不相同，我们就封装一版可通用的节流函数。

2、节流函数的封装

// 文件：throtter.js
// 节流函数
const throtter = (func, delay = 60) => {
    // 锁的标识
    let lock = false;

    // 返回一个事件处理函数
    return (...args) => {
        // 如果 lock 为 true 则跳出
        if (lock) return;

        // 执行函数并更改锁的状态
        func(...args);
        lock = true;

        // 添加定时器，在到达时间间隔时重置锁的状态
        setTimeout(() => lock = false, delay);
    }
}

throtter 函数有两个参数，第一个参数为在事件触发时真正要执行的函数，第二个参数为定义的间隔时间，在函数执行时定义了 lock 的初始值，通过闭包返回一个函数作为事件处理函数，在返回的函数内部判断 lock 状态并确定执行真正的函数 func 还是跳出，每次执行 func 后会更改 lock 状态，通过定时器在规定的时间间隔内重置 lock，这就是函数节流的原理。

3、验证节流函数

// 文件：throtter-test.js
// 使用节流函数
document.addEventListener("scroll", throtter(console.log));

上面我们给 document 对象添加了滚动事件，并不断的打印事件对象，事件处理函数的默认参数为事件对象，从执行效果应该可以看出，平均每 60ms 才会触发一次事件，达到了优化性能的目的，如果想让真正执行的函数 func 传入更多的参数，只需如下处理。

// 文件：throtter-test.js
// a b 为函数要传入的参数
let a = 1, b = 2;

// 返回事件处理函数
const func = throtter(console.log);

// 添加事件监听
document.addEventListener("scroll", e => func(e, a, b));

节流函数一般用于 scroll、resize 事件的情况较多，因为这些事件的触发是连续性的，需要在一个时间间隔内只触发一次。

函数防抖 debounce

函数防抖：当持续发生事件时，事件只在上一次触发后的一段时间内没再触发事件，才会真正的执行事件处理逻辑，如果每两次触发的间隔小于这个时间，则不执行事件逻辑。

1、防抖函数的时序图

前端优化 —— 函数的节流和防抖

从图中可以看出，连续触发事件时并没有执行事件处理函数，只有在某一阶段连续触发后的最后一次才执行，也就是上一次触发的时间间隔要大于设定值才执行，同样的，事件处理函数内部执行逻辑各不相同，我们就封装一版可通用的防抖函数。

2、防抖函数的封装

// 文件：debounce.js
// 防抖函数
const dobounce = (func, delay = 300, timer = null) => {
    return (...args) => {
        // 清除定时器
        clearInterval(timer);

        // 在定时器到时后执行事件处理函数
        timer = setTimeout(() => func(...args), delay);
    }
}

dobounce 函数有三个参数，第一个参数为在事件触发时真正要执行的函数，第二个参数为执行事件的延迟时间，第三个参数为定时器 ID 的初始值，执行 dobounce 通过闭包返回了事件处理函数，在处理函数内部先清除定时器，然后定义定时器并将 ID 赋值给 timer，如果事件连续触发，则会不断的清除定时器，直到有一次触发间隔超过了设定延时时间 delay，才会真正执行 func。

3、验证防抖函数

<!-- 文件：index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数防抖</title>
</head>
<body>
    <input type="text" id="ipt">
</body>
</html>

// 文件：debounce-test.js
// 使用防抖函数
let ipt = document.querySelector("#ipt");

// 添加事件监听
ipt.addEventListener("keyup", debounce(console.log));

上面的功能跟 throtter 类似，真正执行事件处理函数时打印事件对象，通过验证，连续输入触发 keyup 事件，上一次触发和下一次触发间隔时间必须大于 300ms 才会执行打印事件对象的逻辑，如果想传入多个参数套路相同。

// 文件：debounce-test.js
// 获取 dom 元素
let ipt = document.querySelector("#ipt");

// a b 为函数要传入的参数
let a = 1, b = 2;

// 返回事件处理函数
const func = debounce(console.log);

// 添加事件监听
ipt.addEventListener("keyup", e => func(e, a, b));

防抖函数一般用于输入框事件，常用场景就是搜索或查询，如果不使用防抖会连续发送请求，增加服务器的压力，使用防抖后，会在用户输入要查询的关键词后才发送请求，这也更符合用户的习惯，例如百度搜索，就是这样实现的。