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

手写防抖debounce

news 2026/4/5 16:05:56

手写防抖debounce

应用场景

当需要在事件频繁触发时，只执行最后一次操作，可以使用防抖函数来控制函数的执行频率,比如窗口resize事件和输入框input事件；

这段代码定义了一个名为 debounce 的函数，它接收两个参数：fn（一个需要被防抖处理的函数）和 delay（一个延迟时间，单位是毫秒）。防抖(debounce)技术的主要目的是限制某个函数在一定时间内只执行一次，即使在这段时间内被频繁调用。这对于优化性能特别有用，比如避免因快速连续触发事件（如窗口调整大小、输入验证等）而造成的不必要的计算或 DOM 操作。

下面是代码的逐行解析：

  • let timer = null;：在这个函数作用域内声明一个变量 timer，并初始化为 null。这个变量将用来存储 setTimeout 的返回值，即一个可以被清除的计时器标识。
  • return function () { ... };：debounce 函数返回一个新的匿名函数。这样做是因为我们希望返回一个经过防抖处理的新函数，而不是直接修改原函数。这种设计模式称为“闭包”，返回的函数能够访问外部函数（debounce）中的局部变量，如 timer。
  • if (timer) clearTimeout(timer);：每次新的返回函数被调用时，首先检查 timer 是否存在且不为 null。如果存在，这意味着之前已经设置了一个定时器但尚未执行。此时，通过 clearTimeout 清除这个定时器，从而取消即将执行的 fn 调用。
  • timer = setTimeout(() => { fn.apply(this, arguments); }, delay);：这里设置一个新的定时器。当过了 delay 毫秒后，内部的箭头函数会被执行，它通过 apply 方法调用原始函数 fn，并确保 this 的上下文以及传给防抖函数的所有参数都能正确传递给 fn。apply 的第一个参数 this 保证了在 fn 被调用时能保留正确的上下文环境，特别是当 fn 是对象的方法时；第二个参数 arguments 是一个类数组对象，包含了所有传入的参数。
function debounce(fn, delay) {let timer = null;return function () {
如果此时存在定时器的话，则取消之前的定时器重新记时if (timer) clearTimeout(timer);// 设置定时器，使事件间隔指定事件后执行timer = setTimeout(() => {fn.apply(this, arguments);}, delay);};}

应用

<!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><input type="text" id="myInput"><div id="display"></div>
</body>
<script>// 假设这是你的去抖动函数  function debounce(fn, delay) {let timer = null;return function () {if (timer) clearTimeout(timer);timer = setTimeout(() => {fn.apply(this, arguments);}, delay);};}// 这是你想要在输入框内容变化时执行的函数function updateContent(event) {// 获取输入框的值const inputValue = event.target.value;// 更新某个元素的内容（例如，一个显示框）displayElement.textContent = inputValue;}// 获取输入框和显示框的元素const inputElement = document.getElementById('myInput');const displayElement = document.getElementById('display');// 为输入框绑定事件监听器，并使用去抖动函数//将返回的函数绑定到相应的事件处理程序上，以实现防抖的效果。inputElement.addEventListener('input', debounce(updateContent, 500)); // 延迟500毫秒
</script></html>

展示

function debounce(fn,delay){
let timer=null;
return function(){
if(timer) clearTimeout(timer);
timer=setTimeout(()=>fn.apply(this,arguments),delay)
}}

相关文章：

手写防抖debounce

手写防抖debounce 应用场景 当需要在事件频繁触发时&#xff0c;只执行最后一次操作&#xff0c;可以使用防抖函数来控制函数的执行频率,比如窗口resize事件和输入框input事件&#xff1b; 这段代码定义了一个名为 debounce 的函数&#xff0c;它接收两个参数&#xff1a;fn…...

编程日记 2024/6/4 5:54:05

anaconda pycharm jupter分别是

Anaconda Anaconda是一个面向数据科学的Python发行版&#xff0c;它包含了Python解释器、conda包管理器、以及大量的科学计算和数据分析库。Anaconda的主要功能是提供一个易于管理的环境&#xff0c;用于安装、运行和更新Python包&#xff0c;同时支持创建和切换不同的Python环…...

编程日记 2024/6/4 5:53:04

【JMeter接口自动化】第3讲 Jmeter语言及外观配置

Jmeter语言配置 方法一&#xff1a;暂时生效&#xff0c;下次打开JMeter还会恢复默认配置 Jmeter安装后&#xff0c;默认语言是英文&#xff0c;可以在“选项”——“选择语音”中更改 方法二&#xff0c;修改配置文件&#xff0c;永久生效 修改jmeter.properties文件 Jmete…...

编程日记 2024/6/4 5:52:02

浅谈云原生安全

一、云原生安全的层级概念 "4C" Code-Container-Cluster-Cloud 二、云原生各个层级的安全实践有哪些&#xff1f; 1、针对于Cloud针对的是公有云层面&#xff0c;其实就一点 1、使用主账号子角色&#xff0c;赋予最小权限原则进行资源管理。 2、对于Cluster 1、从C…...

编程日记 2024/6/4 5:50:00

[线程与网络] 网络编程与通信原理(五): 深入理解网络层IP协议与数据链路层以太网协议

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏:&#x1f355; Collection与数据结构 (92平均质量分)https://blog.csdn.net/2301_80050796/category_12621348.html?spm1001.2014.3001.5482 &#x1f9c0;Java …...

编程日记 2024/6/4 5:48:58

【Python】超时请求或计算的处理

超时机制 一般应用于处理阻塞问题 场景&#xff1a; 复杂度较大的计算&#xff08;解析&#xff09;某个数值、加解密计算等请求中遇到阻塞&#xff0c;避免长时间等待网络波动&#xff0c;避免长时间请求&#xff0c;浪费时间 1. requests 请求超时机制 reqeusts 依赖中的…...

编程日记 2024/6/4 5:46:56

前端 JS 经典：LRU 缓存算法

前言&#xff1a;什么是 LRU 呢&#xff0c;单词全拼 Least Recently Used&#xff0c;意思是最久未使用。这个算法是做缓存用的&#xff0c;比如&#xff0c;你要缓存一组数据&#xff0c;你要划分缓存块出来&#xff0c;因为不可能每个数据都做缓存&#xff0c;那么划出来的这…...

编程日记 2024/6/4 5:45:55

Python3 笔记：ljust、rjust 和 center

1、ljust() 方法返回一个原字符串左对齐,并使用空格填充至指定长度的新字符串。如果指定的长度小于原字符串的长度则返回原字符串。 ljust(self, width, fillchar , /) width -- 指定字符串长度。 fillchar -- 填充字符&#xff0c;默认为空格。 str1 sentence str2 word…...

编程日记 2024/6/4 5:44:54

恒压频比开环控制系统Matlab/Simulink仿真分析（SPWM控制方式）

介绍恒压频比的开环控制方法驱动永磁同步电机的转动&#xff0c;首先分析恒压频比的控制原理&#xff0c;然后在Matlab/Simulink中进行永磁同步电机恒压频比开环控制系统的仿真分析&#xff0c;最后将Simulink中的恒压频比控制算法生成代码加载到实际工程中进行工程实现。 一、…...

编程日记 2024/6/4 5:43:52

chatgpt4和文心一言的简单对比

功能1. 写一个ebpf程序监控udp延迟 文心一言 答案 编写一个完整的eBPF程序来监控UDP延迟涉及多个步骤&#xff0c;包括编写eBPF C代码、编译、加载到内核&#xff0c;以及用户空间程序来读取eBPF map中的数据。以下是一个简化的示例框架&#xff0c;展示如何使用eBPF来监控U…...

编程日记 2024/6/4 5:42:51

React 为什么使用map来渲染列表 而不是其他循环方法

1. 声明式与函数式编程 React强调声明式编程&#xff0c;这意味着你只需要关心代码“做什么”&#xff0c;而不是“怎么做”。.map()函数是一种高阶函数&#xff0c;它属于函数式编程范畴&#xff0c;能够返回一个新数组&#xff0c;这非常适合用于生成组件列表。 使用.map()…...

编程日记 2024/6/4 5:40:49

【Axure高保真】tab切换输入表单

今天和大家分享tab切换输入表单的原型模板&#xff0c;这个模板方便我们快速制作表单&#xff0c;里面包含了输入框、下拉列表、选择器共10多种常用的元件&#xff0c;后续也可以根据需要自行添加到中继器里。点击tab标签可以分类填写对应的内容&#xff0c;这个原型模板是用中…...

编程日记 2024/6/4 5:35:45

OrangePi AI Pro 测试体验

感谢CSDN活动提供的OrangePi AI Pro &#xff0c;之前一直用的树莓派&#xff0c;正好体验一下新的国产设备&#xff0c; 1、开机体验 整个设备包装不错&#xff0c;链接键盘、屏幕和鼠标&#xff0c;整体开机体验不错&#xff0c;内置OS不错&#xff0c;这个系统内嵌了中文输…...

编程日记 2024/6/4 5:34:43

【C++】：模板初阶和STL简介

目录 一&#xff0c;泛型编程二&#xff0c;函数模板2.1 函数模板概念2.2 函数模板格式2.3 函数模板的原理2.4 函数模板的实例化2.5 模板参数的匹配原则 三&#xff0c;类模板3.1 类模板的定义格式3.2 类模板的实例化 四&#xff0c;STL简介&#xff08;了解&#xff09;4.1 什…...

编程日记 2024/6/4 5:33:42

【软件开发】Java学习路线

本路径视频教程均来自尚硅谷B站视频&#xff0c;Java学习课程我已经收藏在一个文件夹下&#xff0c;B站文件夹同时会收藏其他Java视频&#xff0c;感谢关注。指路&#xff1a;https://www.bilibili.com/medialist/detail/ml3113981545 2024Java学习路线&#xff08;快速版&…...

编程日记 2024/6/4 5:32:40

git拉去代码报错“Failed to connect to 127.0.0.1 port 31181: Connection refused“

最近参与了一个新项目&#xff0c;在使用git clone 克隆代码时遇到了一个报错"fatal: unable to access ‘https://example.git/’: Failed to connect to 127.0.0.1 port 31181: Connection refused",今天就和大家分享下解决过程。 报错详情 在使用git clone 克隆…...

编程日记 2024/6/4 5:29:36

解读信创产业根基，操作系统发展历程

信创产业根基之一操作系统 操作系统是一个关键的控制程序&#xff0c;负责协调、管理和控制计算机硬件和软件资源。作为硬件的首要软件扩展&#xff0c;它位于裸机与用户之间&#xff0c;充当了两者之间的桥梁。通过其核心程序&#xff0c;操作系统高效地管理着系统中的各类资源…...

编程日记 2024/6/4 5:27:34

使用Python爬取华为市场游戏类APP应用

文章目录 1. 写在前面2. 接口分析3. 爬虫开发4. 下载链接获取 【&#x1f3e0;作者主页】&#xff1a;吴秋霖 【&#x1f4bc;作者介绍】&#xff1a;擅长爬虫与JS加密逆向分析&#xff01;Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守…...

编程日记 2024/6/4 5:26:33

【Oracle】修改已经存在的序列的当前值

前情提要 在oracle中一般使用序列来实现ID自增。但是oracle中序列维护的没有mysql那么好。只是单存的递增。 比如新建了一个序列&#xff0c;从1开始&#xff0c;每次递增1。此时我向数据库里插入一条id10的数据。那么在序列查询到10的时候&#xff0c;插入就会报错。 所以比较…...

编程日记 2024/6/4 5:25:31

记一次netty客户端的开发

背景 近日要开发一个tcp客户端程序去对接上游厂商的数据源&#xff0c;决定使用netty去处理&#xff0c;由于很久没有开发过netty了&#xff0c;顺便学习记录下 netty搭建 考虑到我们需要多个client去对接server服务&#xff0c;所以我们定义一个公共的AbstractNettyClient父…...

编程日记 2024/6/4 5:22:27

embeddinggemma-300m部署案例：Ollama服务化后接入低代码平台调用

embeddinggemma-300m部署案例&#xff1a;Ollama服务化后接入低代码平台调用 1. 环境准备与Ollama部署 在开始部署embeddinggemma-300m之前&#xff0c;我们需要先准备好基础环境。Ollama是一个强大的本地大模型运行框架&#xff0c;能够让我们在个人电脑上轻松部署和运行各种…...

编程新知 2026/4/5 15:54:25

PHP WindSearch实现站内搜索功能

必须极速安装~使用composer安装&#xff1a;1composer require rock365/windsearch或 使用Git安装&#xff1a;1git clone gitgithub.com:rock365/windsearch.git还配置啥&#xff0c;立即开始用吧&#xff01;WindSearch包含即用模式、专业模式&#xff0c;即用模式适合简单搜…...

编程新知 2026/4/5 15:34:11

加密货币自动化交易实战指南：从策略设计到收益优化全流程

加密货币自动化交易实战指南&#xff1a;从策略设计到收益优化全流程 【免费下载链接】binance-trade-bot Automated cryptocurrency trading bot 项目地址: https://gitcode.com/gh_mirrors/bi/binance-trade-bot 在加密货币交易领域&#xff0c;自动化策略是提升效率与…...

编程新知 2026/4/5 14:37:06

百考通：AI精准驱动数据分析，让研究更顺畅

在数字化浪潮席卷各行各业的今天&#xff0c;数据已成为核心生产要素&#xff0c;但如何从海量数据中挖掘价值、辅助决策&#xff0c;始终是企业与个人面临的核心难题。传统数据分析流程繁琐、技术门槛高、周期漫长&#xff0c;让许多非专业人士望而却步。百考通&#xff08;ht…...

编程新知 2026/4/5 14:35:05

GEMMA-3像素站保姆级教程：一键部署，体验90年代复古AI界面

GEMMA-3像素站保姆级教程&#xff1a;一键部署&#xff0c;体验90年代复古AI界面 1. 前言&#xff1a;像素与AI的奇妙碰撞 想象一下&#xff0c;当你童年的红白机游戏界面遇上了最前沿的多模态AI技术&#xff0c;会擦出怎样的火花&#xff1f;GEMMA-3像素站正是这样一个充满创…...

编程新知 2026/4/5 14:29:00

提升五倍效率：基于快马平台优化openclaw数据采集工作流

最近在做一个数据采集项目时&#xff0c;发现传统的手动编写爬虫脚本效率实在太低了。每次遇到反爬机制或者需要调整采集策略时&#xff0c;都要花大量时间修改代码。后来尝试用openclaw结合InsCode(快马)平台来优化工作流&#xff0c;效率直接提升了五倍多&#xff0c;这里分享…...

编程新知 2026/4/5 12:53:06

告别手动整理：用快马为coze打造自动化日报生成器提升效率

告别手动整理&#xff1a;用快马为coze打造自动化日报生成器提升效率 每天下班前最头疼的就是整理日报了。零散的工作记录、会议要点、沟通事项全都混在一起&#xff0c;手动分类不仅耗时&#xff0c;还容易遗漏重要信息。最近我用InsCode(快马)平台开发了一个coze自动化日报生…...

编程新知 2026/4/5 12:46:59

4步解决Windows系统苹果设备驱动适配问题

4步解决Windows系统苹果设备驱动适配问题 【免费下载链接】Apple-Mobile-Drivers-Installer Powershell script to easily install Apple USB and Mobile Device Ethernet (USB Tethering) drivers on Windows! 项目地址: https://gitcode.com/gh_mirrors/ap/Apple-Mobile-Dr…...

编程新知 2026/4/5 12:44:55

OpenClaw+Phi-3-vision-128k-instruct：3步搭建个人知识图谱系统

OpenClawPhi-3-vision-128k-instruct&#xff1a;3步搭建个人知识图谱系统 1. 为什么选择这个组合&#xff1f; 上个月整理研究资料时&#xff0c;我发现自己陷入了一个典型的知识工作者困境&#xff1a;电脑里堆满了PDF、网页书签和零散的笔记&#xff0c;但真正需要调用某个…...

编程新知 2026/4/5 12:32:39

Phi-3-mini-4k-instruct-gguf代码实例：curl健康检查+supervisor服务控制命令大全

Phi-3-mini-4k-instruct-gguf代码实例&#xff1a;curl健康检查supervisor服务控制命令大全 1. Phi-3-mini-4k-instruct-gguf简介 Phi-3-mini-4k-instruct-gguf是微软Phi-3系列中的轻量级文本生成模型GGUF版本&#xff0c;特别适合问答、文本改写、摘要整理和简短创作等场景。…...

编程新知 2026/4/5 12:20:33