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

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

news 2025/10/20 14:32: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

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

编程新知 2025/6/11 15:25:30

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/10/15 8:46:10

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/10/17 0:14:48

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/10/4 22:56:55

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/10/17 9:03:47

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/9/5 21:18:15

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2025/9/9 23:27:37

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2025/10/19 13:24:22

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/10/14 0:47:25

MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

编程新知 2025/9/30 3:51:15