前端优化 —— 函数的节流和防抖_前端的节流和防抖的函数-优快云博客

在这里插入图片描述

阅读原文

前言

在前端开发当中我们经常会绑定一些事件触发的某些程序执行，有时这些事件会连续触发，如浏览器窗口 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;

        // 添加定时器，在到达时间间隔时重置锁