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

时间 2019-12-05

标签前端优化函数节流繁體版

原文原文链接

阅读原文

前言

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

函数节流 throtter

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

一、节流函数的时序图

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

二、节流函数的封装

// 文件：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，这就是函数节流的原理。浏览器

三、验证节流函数

// 文件：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

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

一、防抖函数的时序图

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

二、防抖函数的封装

// 文件：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。函数

三、验证防抖函数

<!-- 文件：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));

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

总结

“节流” 和 “防抖” 是前端在项目中常常使用的优化手段，代码虽然很少，可是确是前端面试 “出镜率” 很是高的知识点，从而能看出它们的重要性，因此建议前端同窗们必定要知道，并能手写，这是 “一举两得” 的事，能够用来经过面试，也能够由于工做中遇到直接就写而提升工做效率。