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

最新推荐文章于 2025-05-01 12:32:07 发布

Panda Shen

最新推荐文章于 2025-05-01 12:32:07 发布

阅读量519

点赞数

分类专栏： JavaScript 文章标签： JavaScript 性能优化

本文链接：https://blog.youkuaiyun.com/github_38140984/article/details/83005926

版权

本文详细介绍了前端开发中的函数节流和防抖技术，旨在解决连续触发事件导致的性能问题和服务器压力。节流确保在固定时间间隔内仅执行一次事件处理程序，适合用于窗口滚动、输入框事件等。防抖则保证在上一次触发事件后的一段时间内无其他触发时执行，适用于输入框搜索查询。通过实例和代码演示，阐述了节流和防抖的实现与应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

阅读原文

前言

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

        // 添加定时器

最低0.47元/天解锁文章