防抖debounce函数的基本使用

最新推荐文章于 2024-05-18 09:53:46 发布
最新推荐文章于 2024-05-18 09:53:46 发布
阅读量2.2k 收藏 4
点赞数
分类专栏： Es6 JavaScript 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47230378/article/details/127072509
版权
本文介绍了前端开发中防抖(debounce)函数的重要性和工作原理，并通过代码示例展示了如何使用防抖函数，强调了在实际应用中this的绑定和参数传递的注意事项。
摘要由CSDN通过智能技术生成

目录

前言

防抖和节流函数目前已经是前端实际开发中两个非常重要的函数，也是面试经常被问到的面试题，我们会一起来学习防抖和节流函数。

一、认识防抖debounce函数

  • 我们用一副图来理解一下它的过程：
    在这里插入图片描述

二、使用步骤

1.代码演示

代码如下（示例）：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
最低0.47元/天 解锁文章
陈吖
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
debounce防抖函数的使用（js和vue）
trigger的博客
08-24 3572
debounch防抖函数主要应用场景，解决按钮快速点击，多次请求的问题和input输入框多次请求的问题。接下来直接介绍在js和vue项目中的使用方式。lodash工具库地址：https://lodash.com/docs#debounce 三个参数： _.debounce(func, [wait=0], [options={}]) options有如下三个可选参数配置： leading：指定在延迟开始前是否执行func（默认为false）。 maxWait：设置func...
一文搞懂如何在 React 中使用 防抖（Debounce）和 节流（Throttle）
小陈的博客
02-27 6127
在自定义 hook 中，使用了另外一个 state 进行保存和更新状态，只有在间隔时间到了才会更新，然后将这个新的 state 返回出去，在页面上可以这样使用，直接依赖 返回出来的状态，这样每次这个状态改变时，就是间隔时间到了的时候，就可以进行异步请求了。而节流函数则是每隔一段时间就执行一次请求。在前端开发中，防抖和节流函数几乎是必备的技能，它们的实现原理都离不开 js 闭包的特性，而在 React 中通过使用自定义的 hook，可以达到一样的效果，有些场景下可能还更方便些，但总的来说本质还是那样。
推荐使用：debounce - 精准控制函数执行的利器
最新发布
gitblog_00020的博客
05-18 226
推荐使用：debounce - 精准控制函数执行的利器 项目地址:https://gitcode.com/sindresorhus/debounce 在软件开发中，我们经常需要优化性能并确保用户体验流畅。debounce是一个小巧而强大的JavaScript库，它能帮助你在适当的时间点执行函数，避免频繁调用引起的性能问题。这个项目简单易用，适用于各种场景，是提高代码效率的一个理想选择。 项目介绍 ...
js 函数防抖（debounce）函数节流（throttle）
qq_27009517的博客
07-01 4240
一、什么是函数节流（throttle） 概念：限制一个函数在一定时间内只能执行一次。 举个栗子，坐火车或地铁，过安检的时候，在一定时间（例如10秒）内，只允许一个乘客通过安检入口，以配合安检人员完成安检工作。上例中，每10秒内，仅允许一位乘客通过，分析可知，“函数节流”的要点在于，在一定时间之内，限制一个动作只执行一次。 上图中绿色块表示触发一次事件，持续触发事件时，throttle会合并一定时间内的事件，并在该时间结束时真正去触发一次事件 二、为什么需要函数节流 　　前端开发过程中...
vue.js vue使用debounce 并传参
wangjun5159的专栏
09-28 6354
debounce是防抖动，就是延迟一段时间再执行，指定时间内如果有多次动作，则取消先前动作，以最后一个动作为基点往后延迟。最经典的应用场景就是根据关键词搜索，我们通常会监听change事件，在onchange函数中执行远程搜索，如果输入3个字符，则onchange执行3次，其实输入完3个字符后，执行1次就可以了，但我们无法得知什么时候输入结束，所以才用延迟执行，比如输入了第1个字符，则延迟300毫秒后执行，如果300毫秒内，输入了第2个字符，则取消第一个字符的查询，第2个字符延迟300毫秒执行，如果300毫
使用debounce实现节流功能
TC139389的博客
02-28 309
/ 在这里执行您需要防抖的操作，可以使用传入的参数 param console.log('Received parameter:', param);在vue中使用 ———— 在created中this.debouncedHandleClick只是挂载了一下这个方法并没有调用，只有handleClick方法触发了才会调用。引用： import debounce from 'lodash/debounce';安装： npm install lodash。
手写防抖debounce函数，细节拆解每一步，学会你也会手写一个完美的防抖函数【JavaScript】
Umbrella_Um的博客
09-16 1596
手写防抖函数debounce，细节拆解每一步，学会你也会手写一个完美的防抖函数
javascript防抖函数debounce详解
10-16
防抖函数的基本原理是利用定时器来控制函数的执行。当函数被调用时，它不会立即执行，而是设置一个定时器，如果在设定的时间间隔内函数再次被调用，就会清除原有的定时器并重新设置。只有当最后的一次调用在设定时间...
在vue中使用防抖函数组件操作
10-15
防抖(debounce)函数就是一个非常实用的工具，它可以确保一个函数不会在短时间内被连续调用，而是等待一段时间后再执行。本文将详细介绍如何在Vue中使用防抖函数组件。 首先，我们来看一个基础的防抖函数实现。以下...
Javascript节流函数throttle和防抖函数debounce
01-18
问题的引出 　在一些场景往往由于事件频繁被触发，因而频繁地进行DOM操作、资源加载，导致UI停顿甚至浏览器...在现在很多的javascript框架中都提供了这两个函数。例如 jquery中有throttle和debounce插件， underscore.j
js代码-防抖debounce实现
07-15
在JavaScript编程中，"防抖(debounce)"是一种优化技术，用于限制函数的执行频率，特别是在处理高频事件（如窗口滚动、输入框输入等）时，能够有效地减少计算资源的消耗，提高性能。防抖函数的基本原理是：如果一个...
js代码-防抖（debounce） 作用短时间内多次（频繁）该函数，只允许执行最后一次或者第一次。
07-16
js代码-防抖（debounce） 作用短时间内多次（频繁）该函数，只允许执行最后一次或者第一次。
深入浅出防抖函数 debounce
chern1992的博客
06-17 3657
引言 上一节我们认识了节流函数 throttle，了解了它的定义、实现原理以及在 underscore 中的实现。这一小节会继续之前的篇幅聊聊防抖函数 debounce，结构是一样的，将分别介绍定义、实现原理并给出了 2 种实现代码并在最后介绍在 underscore 中的实现，欢迎大家拍砖。 有什么想法或者意见都可以在评论区留言，下图是本文的思维导图，高清思维导图和更多文章请看我的Github。 #定义及解读 防抖函数 debounce 指的是某个函数在某段时间内，无论触发了多少次回调，都只.
​函数的防抖(debounce)
zx15232117293的博客
12-22 215
我们在平时开发的时候，会有很多场景会频繁触发事件，比如说搜索框实时发请求，onmousemove, resize, onscroll等等，有些时候，我们并不能或者不想频繁触发事件。非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。// 这边的 this 指向谁?
面试官：什么是debounce？
java小白翻身
06-07 1226
这是因为Vue是基于响应式原理的框架，在数据变化后需要重新渲染视图，因此将函数封装成 watcher 可以保证在数据更新后才执行相应的操作，避免出现意料之外的情况。是一种限制函数执行频率的技术，它可以在事件触发后延迟一段时间再执行函数，如果在这个时间内再次触发该事件，则之前的计时器会被清除并重新开始计时。在每次被调用时，先清除之前的计时器，并重新设置一个新的计时器，延迟一定时间后执行传入的函数。函数，通过定时器来延迟函数的执行，并能够在规定时间内清除之前的计时器，实现函数调用的控制。函数对该方法进行包装。
快速理解_.debounce方法
weixin_33827590的博客
01-26 8839
首先： 　　先谈谈类似上图的需求，有可能需要实现用户在输入内容的时候，使用ajax实时传输内容到服务器。 我们肯定不希望看到，每次输入都请求一次，如此频繁的请求，恐怕对身体也不是很好吧？ 其次： 解决的思路之一：underscore.js类库中的_.debounce方法。关于什么是underscore，什么是函数式编程等等，我觉得有必要了解下。 说正事：_.debounce方法...
防抖（debounce）和节流（throttle）
haonan_z的博客
07-12 751
最近我在面试一些5年的前端，问他们有哪些对闭包的应用，竟然一个都搭不上来，问他们用过防抖节流吗，他们说用过，但不会写 真的，作为一个5年的前端，这样真的不行，他们我们从思路上去讲防抖和节流的做法 一、防抖（debounce） 首先我们介绍一下什么是防抖，防抖就是当多次事件产生时，只需要最后一次真实的触发事件 最经典的应该是，模糊匹配搜索，即用户在搜索框里输入，我们会去模糊搜索出用户可能想搜索的内容的列表 这个时候为了减少搜索频次，我们就会加入防抖，以便在用户停在输入的一段时间后再触发搜索，减少服务端压力 说
防抖函数 debounce
wangc_gogo的博客
07-11 256
有时在监听事件时，在短时间内需要发送几百次的刷新，这样的话会严重的影响性能，比如vue 页面引入bscroll 在页面初始化加载图片时，需要时刻监听每个图片是否加载完毕，每次监听都需要调用BScroll的 refresh（）函数，这样可以使用防抖函数增加性能，下面来个简单的防抖函数案例： debounce(func,delay){ timmer=null; if(...
debounce防抖函数减少函数调用的逻辑分析（包裹上时间的外衣，在时间还没来时，kill）
Coder-coco的博客
08-15 48
return function (...args) { //这一层函数的封装返回，是为了下一个原函数到来，可以拿到上一个原函数。从代码逻辑看，第一个原函数到来，在某个时间后才执行的原函数，先将原函数通过setTimeout封装起来保存到变量timer，但是在下一个原函数的到来时，清除掉timer（即上一个通过时间的外衣包裹着的原生函数），然后又给它包裹上一层时间的外衣。当调用同一动作在n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。（3）表单提交，防止表单重复提交；
防抖节流函数使用场景
11-17
当一个函数需要频繁触发时，可以使用防抖函数来控制函数的执行频率，避免频繁触发导致页面卡顿或者浏览器崩溃等问题。比如：搜索框输入时，可以使用防抖函数来控制搜索请求的发送频率，避免用户输入过快导致频繁发送...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值