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

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

news 2025/8/21 7:09:51

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

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/8/2 7:31:40

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/23 3:55:49

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/8/21 6:37:00

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/7/28 21:04:40

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/8/20 17:01:25

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2025/8/19 0:00:58

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/7/26 12:16:34

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

GitFlow 工作模式（详解）

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

编程新知 2025/8/18 2:56:04