js 防抖是什么 JavaScript防抖怎么用

最新推荐文章于 2024-09-01 16:31:32 发布
最新推荐文章于 2024-09-01 16:31:32 发布
阅读量7k 收藏 28
点赞数 14
分类专栏： js 文章标签： js防抖 JS防抖怎么用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshidamimi0/article/details/99705915
版权

JS防抖其实也是用来提升网页性能的一种技术写法
防抖就是指当用户触发某个操作时，如果在指定的时间内再次触发该操作，那么就清除前面触发的操作，直到用户操作之后并且在指定的时间内不再操作我们再处理用户的请求

常见的场景：如用户在输入框输入内容，我们根据用户输入内容去查数据。

当用户输入文字时，监听input事件，那么用户每输入一个字符都会触发查询，这样就会发起很多个请求

所以，我们可以考虑一下，当用户输入关键字的时候并且在3秒内不再输入文字，我们才发请求，否则我们就什么都不做

所以我们应该每次都使用一个定时器来保存用户的操作，然后每次在指定时间内触发输入的时候都把上一次的定时器清除掉即可，这样就保证了只发一次请求

但是直接把定时器设置为全局变量容易导致变量在别处被修改，所以我们可以用函数封装一下定时器变量，方便给需要的函数调用

 

如图


在debounce里面定义变量存储定时器，并且我们可以设置fn,delay来接收外部传来的函数以及延迟的时间，然后我们返回一个函数即可

这样，当我们使用addEventListener('input',debounce(fn,delay))绑定事件时
debounce就会立即执行，所以实际input事件绑定的是return的那个函数
这样，当每次触发input时都会执行对应的函数，从而实现节省性能，实现只发最后一次请求的结果了


 

woshidamimi0
关注
专栏目录
JS中防抖函数介绍与实现（秒懂如何手写防抖）
百赢出品，必属精品
04-01 1797
函数防抖是一种用于限制函数执行频率的技术。在JavaScript中，函数防抖常用于处理频繁触发的事件，如浏览器窗口的resize事件、滚动事件、输入框的输入事件等。它通过延迟函数的执行来确保在一定时间内只执行一次。可以避免频繁触发事件造成不必要的资源消耗或执行结果混乱的情况，而只关注最后一次触发事件的结果。1.当事件被触发时，不立即执行事件处理函数，而是等待一段时间（延迟时间）。2.如果在这段时间内事件再次被触发，则重新计时，延迟时间重新开始计算。3.直到延迟时间内没有再次触发事件，才执行事件处理函数。
逐行解释JS防抖及防抖的使用
weixin_44375186的博客
02-24 2185
debounce(func, waitTime) { let timer = null; return function() { const context = this; const args = arguments; if (timer) { clearTimeout(timer); } timer = setTimeout(() => func.apply(context, args), waitTime); } }
JS防抖是什么？干嘛用的？
沐爸的博客
08-11 897
防抖在前端开发中可以说经常用到，有诸多使用场景。接下来我们一起看下防抖的定义、防抖函数的实现、应用场景、lodash防抖函数以及防抖在框架中的使用。Let's go
前端 防抖（Debouncing）以及示例
最新发布
YJGGZHK的博客
09-01 453
防抖技术是一种在前端开发中用于优化性能的方法，特别是在处理高频事件（如输入、滚动等）时。它通过延迟执行回调函数，直到最后一次事件触发后的指定时间内没有新的触发，来减少函数调用次数。防抖函数通常使用 `setTimeout` 实现，它清除并重新设置定时器以实现延迟。在 Vue 中，可以通过绑定 `:value` 和 `@input` 事件，结合防抖函数，实现对输入事件的优化处理。
js防抖是什么
浅夏博客
09-14 317
防抖
JavaScript第 12 篇，JavaScript防抖功能，原生JavaScrip防抖（原生JS防抖函数，防抖功能的应用与解析，手把手教学）
weixin_65793170的博客
04-04 1万+
⭐防抖就是某一高频事件不断被触发时，仅在最后一次真正执行事件处理代码，将多次执行变为最后一次执行，具体点就是我们在触发高频事件后，n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。其实，防抖和节流都是防止函数多次调用。
js防抖
OnceTheKing的博客
10-05 271
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器</title> </head> <body> 抖动：<input type="text" id="input"> <scr...
JS防抖
YuqiRealm.com
06-27 446
在前端开发的过程中，有时候我们需要对一些事件进行相应，但是，有时候，这些事件可能会十分频繁的触发。比如：1、window 的 resize、scroll 2、mousedown、mousemove 3、keyup、keydown为了解决这样的问题，一般会有两种方案来解决： 防抖和节流（debounce and throttle）本篇将讲述第一种方案：防抖防抖防抖的原理就是，触发事件的回调函数会在事
javascript防抖
weixin_35752233的博客
12-20 434
JavaScript 防抖是一种技术，用于限制在特定时间内连续触发的事件被多次执行。例如，当用户在输入框中连续输入时，可能会触发多次 keyup 事件。如果我们在 keyup 事件中执行了一些复杂的操作，则可能会导致性能问题。这时，我们可以使用防抖来解决这个问题。 防抖的原理是在事件触发后，延迟一定的时间执行相应的操作，如果在延迟的时间内又触发了相同的事件，则取消之前延迟的执行，重新开始计时。这样...
彻底搞懂JavaScript防抖与节流
艾编程带你学前端博客
12-14 850
防抖的概念在连续的事件中，只需触发最后一次回调，也就是将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay（延迟）时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。应用场景搜索框输入查询、手机号、邮箱验证输入检测。只需用户最后一次输入完，再发送请求窗口大小resize。只需窗口调整完成后，计算窗口大小，防止重复渲染。什么是节流使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。节流应用场景。
深入了解JavaScript 防抖和节流
10-16
JavaScript中的防抖(debounce)和节流(throttle)是两种常用的优化策略，它们主要用于控制频繁触发的函数调用，以提高性能和用户体验。这两种技术在处理窗口 resize 事件、滚动事件、搜索输入框的实时查询等场景中尤其...
浅谈JavaScript节流和防抖函数
10-14
JavaScript中的节流（Throttle）和防抖（Debounce）是两种常见的技术手段，用于控制事件处理器的触发频率，从而提高程序性能和用户体验。 节流函数（Throttle）的目的是在一段给定的时间内只执行一次回调函数，不管...
浅析JavaScript 函数防抖和节流
10-15
JavaScript函数防抖和节流是前端开发中常见且重要的性能优化技术，它们主要用于控制在一定时间间隔内高频触发的事件函数的执行频率，以避免不必要的计算或者请求，提高程序的性能和用户体验。 函数防抖(debounce)的...
js实现防抖
weixin_35749786的博客
01-03 1052
防抖的目的是在一段时间内，只执行一次函数。 下面是一个使用 JavaScript 实现防抖的示例： function debounce(fn, delay) { // 定义一个标志，表示函数是否正在执行 let flag = false; return function() { // 如果函数正在执行，则不做任何操作 if (flag) return; flag...
js——防抖
weixin_41246825的博客
03-25 2422
防抖（debounce） 监听一个输入框，文字变化后触发change事件，直接用Keyup事件，则会频繁触发change事件；防抖：用户输入结束或者暂停时，才出发change事件 说在前面： 1）aplly用法详解 2）keyup事件 代码实现： 1：未封装版本 const inputDom = document.getElementById('input') let timer inputDom.addEventListener('keyup', () => { if(timer) {
JS中的防抖
热门推荐
weixin_49592687的博客
04-20 5万+
节流和防抖这里两个词可能对一些初入JavaScript的同学比较陌生,那这篇文章主要是针对这些同学们的,浅谈一下防抖和节流 防抖: 1. "防抖"是什么 首先,先去解释一下什么叫做防抖, 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。纯理论是比较抽象的,还是用代码来的实在。 假设: 我有一个<input>标签,并想获得输入时的值,代码是这样的: <body> <input type="text"> <script>
JS 防抖
YuqiRealm.com
10-27 584
没有防抖：var count = 1; var container = document.getElementById('container');function getUserAction() { container.innerHTML = count++; };container.onmousemove = getUserAction;此时，鼠标移动，getUserAction方法就会频
js 防抖
不二喵老师
11-12 154
防抖的本质就是将几秒内触发的事件，统一变成最后触发的事件。也可以说就是定时器的维护，一旦在定时器设置的时间内触发相同事件便重置定时器。 // 包装事件的 todo 函数 function todo (func, delay) { // 定义一个timer let timer = null // 返回一个函数，在函数中调用需要触发的func return function () { // 通过 thi
深入理解与实践：JavaScript防抖节流技巧
本文主要探讨了JavaScript中的防抖(debounce)和节流(throttle)技术，这两种技术在前端开发中常用于优化性能，特别是在处理频繁触发的事件时。防抖和节流的主要区别在于它们控制事件处理函数执行的方式，以避免不必要...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值