当前位置： 首页 > news >正文

js中防抖 debounce 节流 throttle 原理 从0手动实现

news 2026/1/27 19:07:47

1 防抖

        高频触发事件时，执行损耗高的操作，连续触发过程中，只执行最后一次。

  1. 高频事件：input scroll resize等。
  2. 损耗高：网络请求、dom操作。

         实现防抖步骤：1.在回调函数中判断timer是否存在，存在就清理计时器，重新计时执行。2.在实现debounce函数时，注意返回函数和传入的函数参数都不能时回调函数，否在造成this丢失。3. debounce函数中返回函数顶层使用this保存，回调函数使用apply调用。 4.要使传递参数可行，顶层函数解构赋值参数，然后再回调apply时传入参数（注意不需要解构，...args时就是个数组）。

// 防抖： 防止js函数在短时间内被频繁调用，减少性能消耗以及视觉抖动或者网络消耗服务器资源
// 防抖原理：再触发频率高的事件中，执行耗费性能的操作，连续操作后，只有最后一次操作生效
// 频率高的事件：resize, input, scroll, mousemove, mouseover, mouseout, keyup, keydown, keypress
// 耗费性能的操作：dom操作，网络请求// 事件触发后，延迟一段时间执行函数，如果在这段时间内再次触发事件，则重新计时
let timer = null
document.getElementById('btn').addEventListener('click' , ()=>{timer && clearTimeout(timer)timer = setTimeout(()=>{console.log('click__debounce')}, 500)
})// 也可以使用lodash库中的debounce方法，lodash(func, [wait=0], [options={}])
class _ {static debounce(callback, wait){let timer = null// 返回不能使用箭头函数，否则无法获取this中的dom元素return function(...args){// 存储调用时的this（一般是dom元素）const _this = thistimer && clearTimeout(timer)timer = setTimeout(()=>{// 通过apply将this指向调用时的dom元素callback.apply(_this, args)}, wait)}}
}// 传入函数不能使用箭头函数，否则无法绑定this
const debounceFunc = _.debounce(function(e){console.log(e)console.log(this)console.log('input')
}, 500)document.querySelector('input').addEventListener('input', debounceFunc)

2 节流

        高频触发事件时，执行损耗高的操作，连续触发过程中，在设置好的单位时间内只执行一次。

        流程和防抖类似，区别在于每次判断定时器是否存在，如果存在就不执行任何操作，如果定时器不存在，那么需要重新设置定时器，并且再定时器的回调函数内部执行末尾清除定时器。代码如下所示：

// 节流： 频繁触发事件时，减少触发次数，提高性能
// 例如：视频播放时 保存播放进度
// 防抖原理：再触发频率高的事件中，执行耗费性能的操作，连续操作后，单位事件内只有一次生效
// lodash库中的throttle方法，lodash(func, [wait=0], [options={}])
let timer_t = undefined
document.getElementById('btn_t').addEventListener('click', () => {if(!timer_t){timer_t = setTimeout(()=>{console.log('click throttle')timer_t = undefined}, 1000)}
})_.throttle = function(callback, wait){let timer = undefinedreturn function(...args){_this = thisif(!timer){timer = setTimeout(()=>{callback.apply(_this, args)timer = undefined}, 1000)}}
}const throttleFunc = _.throttle(function(e){console.log(this)console.log(e)console.log("click throttle")
})document.getElementById('input_t').addEventListener('input', throttleFunc)

3 配套文件index.html

        新建index.js将上述代码拷贝即可在控制台查看效果，index.html内容如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<div><button id="btn">click_debounce</button><button id="btn_t">click_throttle</button><input type="text" id="input"><input type="text" id="input_t"><script src="08_index.js"></script>
</div>
</body>
</html>

相关文章：

js中防抖 debounce 节流 throttle 原理 从0手动实现

1 防抖 高频触发事件时&#xff0c;执行损耗高的操作&#xff0c;连续触发过程中&#xff0c;只执行最后一次。 高频事件&#xff1a;input scroll resize等。损耗高&#xff1a;网络请求、dom操作。 实现防抖步骤&#xff1a;1.在回调函数中判断timer是否存在&#xff0c;存在…...

编程日记 2024/9/29 5:56:16

AIGC: 10 AI转文服务器的搭建过程记录

上图是台风席卷城市&#xff0c;现在企业的服务基本都是混合部署&#xff0c;云计算厂商的机房往往可以提供比较好的保护&#xff0c;一般在地下&#xff0c;扛多少级地震&#xff0c;扛多少级台风&#xff0c;而自建机房&#xff0c;往往写字楼经常停电&#xff0c;网络运营上…...

编程日记 2024/9/29 5:53:14

性能测试1初步使用Jmeter

当你看到这边文章的时候&#xff0c;详细你已经知道啥是性能测试&#xff0c;以及也听说过Jmeter了&#xff0c;所以不过多介绍&#xff0c;这里&#xff0c;只是帮助你快速的使用Jmeter来测试接口。 1获取安装包 官网下载地址&#xff1a;https://jmeter.apache.org/downloa…...

编程日记 2024/9/29 5:52:13

OpenGL ES 绘制一个三角形(2)

OpenGL ES 绘制一个三角形(2) 简述 本节我们基于Android系统&#xff0c;使用OpenGL ES来实现绘制一个三角形。在OpenGL ES里&#xff0c;三角形是一个基础图形&#xff0c;其他的图形都可以使用三角形拼接而成&#xff0c;所以我们就的案例就基于这个开始。 在Android系统中…...

编程日记 2024/9/29 5:51:11

QT----Creater14.0,qt5.15无法启动调试,Launching GDB Debugger报红

问题描述 使用QT Creater 14.0 和qt5.15,无法启动调试也没有报错,加载debugger报红 相关文件都有 解决方案 尝试重装QT,更换版本5.15.2,下载到文件夹,shift鼠标右键打开powershell输入 .\qt-online-installer-windows-x64-4.8.0.exe --mirror http://mirrors.ustc.edu.cn…...

编程日记 2024/9/29 5:49:09

初试React前端框架

文章目录 一、React概述二、React核心特性1、组件化设计2、虚拟DOM3、生态系统 三、实例操作1、准备工作2、创建项目结构3、启动项目4、编写React组件5、添加React样式6、运行项目&#xff0c;查看效果 四、实战小结 一、React概述 大家好&#xff0c;今天我们将一起探索React…...

编程日记 2024/9/29 5:48:08

华为OD机试真题---手机App防沉迷系统

题目概述 智能手机在方便我们生活的同时&#xff0c;也侵占了大量时间。手机App防沉迷系统旨在帮助用户合理规划手机App使用时间&#xff0c;确保在正确的时间做正确的事。系统的主要功能包括&#xff1a; 在一天24小时内&#xff0c;可注册每个App的允许使用时段。一个时段只…...

编程日记 2024/9/29 5:47:07

物流货运托运发货单二联三联打印软件定制 佳易王物流单管理系统操作教程

一、前言 物流货运托运发货单二联三联打印软件定制 佳易王物流单管理系统操作教程 1、软件为绿色免安装版&#xff0c;解压即可使用&#xff0c;已经内置数据库&#xff0c;不需再安装。 2、软件下载可以到本文章最后点击官网卡片下。 二、软件程序教程 1、如图&#xff0c;…...

编程日记 2024/9/29 5:46:06

代码随想录算法训练营| 找树左下角的值 、 路径总和 、 从中序与后序遍历序列构造二叉树

找树左下角的值 题目 参考文章 思路&#xff1a;这里寻找最左下角的值&#xff0c;其实用前中后序都是可以的&#xff0c;只要保证第一遍历的是左边开始就可以。设置Deep记录遍历的最大深度&#xff0c;deep记录当前深度。当遇到叶子节点时而且当前深度比最大深度还大则更换最…...

编程日记 2024/9/29 5:45:05

【开源免费】基于SpringBoot+Vue.JS服装销售平台（JAVA毕业设计）

博主说明&#xff1a;本文项目编号 T 054 &#xff0c;文末自助获取源码 \color{red}{T054&#xff0c;文末自助获取源码} T054&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…...

编程日记 2024/9/29 5:44:04

人工智能与自然语言处理发展史

前言 在科技的浪潮中&#xff0c;人工智能 (AI) 作为一股不可阻挡的力量&#xff0c;持续推动着社会与科技的进步。本博客旨在深入剖析人工智能及其核心领域——神经网络、自然语言处理、统计语言模型、以及大规模语言模型——的演进历程&#xff0c;以专业的视角展现这一领域…...

编程日记 2024/9/29 5:43:03

0基础跟德姆（dom）一起学AI 机器学习01-机器学习概述

【知道】人工智能 - Artificial Intelligence 人工智能 - AI is the field that studies the synthesis and analysis of computational agents that act intelligently - AI is to use computers to analog and instead of human brain - 释义 - 仿智&#xff1b; 像人…...

编程日记 2024/9/29 5:42:02

yakit使用教程（一，下载并进行基础配置）

一&#xff0c;yakit简介 YAKIT&#xff08;Yet Another Knife for IT Security&#xff09;是一款网络安全单兵工具&#xff0c;专为个人渗透测试员和安全研究人员设计。它整合了一系列实用的安全工具&#xff0c;例如密码破解工具、网络扫描器、漏洞利用工具等&#xff0c;帮…...

编程日记 2024/9/29 5:41:01

计算机毕业设计电影票购买网站 在线选票选座 场次订票统计 新闻留言搜索/springboot/javaWEB/J2EE/MYSQL数据库/vue前后分离小程序

系统功能 ‌在线选票选座‌&#xff1a;用户可浏览电影场次&#xff0c;选择座位并生成订单。‌场次订票统计‌&#xff1a;系统实时统计各场次订票情况&#xff0c;便于影院管理。‌新闻发布与留言‌&#xff1a;发布最新电影资讯&#xff0c;用户可留言互动。‌搜索功能‌&a…...

编程日记 2024/9/29 5:40:00

DES、3DES 算法及其应用与安全性分析

一、引言 1.1 研究背景 在当今数字化时代，信息安全至关重要。对称加密算法作为信息安全领域的重要组成部分，发挥着关键作用。DES（Data Encryption Standard）作为早期的对称加密算法，由美国国家标准局于 1977 年采纳为数据加密标准。随着计算机运算能力的不断增强，DES 算…...

编程日记 2024/9/29 5:38:58

TypeScript介绍和安装

TypeScript介绍 TypeScript是由微软开发的一种编程语言&#xff0c;它在JavaScript的基础上增加了静态类型检查。静态类型允许开发者在编写代码时指定变量和函数的类型&#xff0c;这样可以在编译时捕获潜在的错误&#xff0c;而不是等到运行时才发现问题。比如&#xff0c;你…...

编程日记 2024/9/29 5:34:55

NetworkPolicy访问控制

NetworkPolicy是Kubernetes中一种用于控制Pod之间以及Pod与外部网络之间流量的资源对象。它可以帮助你在 IP 地址或端口层面&#xff08;OSI 第 3 层或第 4 层&#xff09;控制网络流量。NetworkPolicy 资源使用标签选择 Pod&#xff0c;并定义选定 Pod 所允许的通信规则。它可…...

编程日记 2024/9/29 5:33:54

C++面向对象基础

目录 一.作用域限定符 1.名字空间 2.类内声明&#xff0c;类外定义 二.this指针 1 概念 2.功能 2.1 类内调用成员 2.2 区分重名的成员变量和局部变量 2.3链式调用 三.stastic关键字 1.静态局部变量 2 静态成员变量 3 静态成员函数 4 单例设计模式&#xff08;了解…...

编程日记 2024/9/29 5:31:52

遥感图像变换检测实践上手（TensorRT+UNet）

目录 简介 分析PyTorch示例 onnx模型转engine 编写TensorRT推理代码 main.cpp测试代码 小结 简介 这里通过TensorRTUNet&#xff0c;在Linux下实现对遥感图像的变化检测&#xff0c;示例如下&#xff1a; 可以先拉去代码&#xff1a;RemoteChangeDetection 分析PyTorch示…...

编程日记 2024/9/29 5:26:47

Transformers 引擎，vLLM 引擎，Llama.cpp 引擎，SGLang 引擎，MLX 引擎

1. Transformers 引擎 开发者&#xff1a;Hugging Face主要功能&#xff1a;Transformers 库提供了对多种预训练语言模型的支持&#xff0c;包括 BERT、GPT、T5 等。用户可以轻松加载模型进行微调或推理。特性&#xff1a; 多任务支持&#xff1a;支持文本生成、文本分类、问答…...

编程日记 2024/9/29 5:25:46

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2026/1/25 4:36:37

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2026/1/26 21:16:30

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2026/1/23 6:49:43

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2025/12/28 14:49:14

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2026/1/27 18:13:23

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2026/1/25 8:10:56

苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...

编程新知 2025/12/22 12:09:15

绕过 Xcode？使用 Appuploader和主流工具实现 iOS 上架自动化

iOS 应用的发布流程一直是开发链路中最“苹果味”的环节&#xff1a;强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说&#xff0c;这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发&#xff08;例如 Flutter、React Na…...

编程新知 2026/1/10 11:35:24

前端打包工具简单介绍

前端打包工具简单介绍 一、Webpack 架构与插件机制 1. Webpack 架构核心组成 Entry&#xff08;入口&#xff09; 指定应用的起点文件&#xff0c;比如 src/index.js。 Module&#xff08;模块&#xff09; Webpack 把项目当作模块图&#xff0c;模块可以是 JS、CSS、图片等…...

编程新知 2026/1/11 8:05:23