防抖函数的方法使用

最新推荐文章于 2024-04-01 19:36:13 发布
最新推荐文章于 2024-04-01 19:36:13 发布
阅读量495 收藏 8
点赞数 10
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h960822/article/details/135186812
版权
本文介绍了JavaScript中两种常见的防抖技术：1)使用变量判断实现单次请求，2)通过定时器实现防抖效果并提供debounce函数封装。重点讲解了如何在发送请求前后管理和控制变量，以及如何确保只执行最后一次定时器操作。
摘要由CSDN通过智能技术生成

@1 第一种使用方法,使用一个变量来进行判断。
        定义一个变量isRun,用于判断变量的值是否进行下一步的操作，例如在发送请求之前判断是否为false,如果通过判断进行方法请求函数体中，第一步修改变量的值为true,第二步当函数请求结束之后在将变量改为false。


 

@2 利用定时器来进行防抖：
        我们通过给每一个点击事件都添加一个定时器的方法，如果定时器规定的执行函数的时间没
        有到之前就把之前的定时器给进行清除。这样就只会执行最后一次的定时器了。
 

 

@3 封装防抖函数的方法debounce 

 

h960822
关注
防抖函数的使用
m0_50290552的博客
07-13 732
//防抖函数的代码如下： export function debounce(fn, delay) { let timer = null; return function () { if (timer) clearTimeout(timer); timer = setTimeout(() => { fn.apply(this); }, delay); } } 在vue中的使用：首先在mounted函数里面调
函数防抖知识要点
weixin_44736637的博客
03-02 6181
函数防抖 debounce JavaScript 中的函数大多数情况下都是由用户主动调用触发的，比如说点击、拖拽、改变浏览器尺寸、提交表单等。除非是函数本身的实现不合理，否则一般不会遇到跟性能相关的问题。 但是在一些少数情况下，函数的触发不是由用户直接控制的。在这些场景下，函数有可能被非常频繁地调用，而造成性能问题： mousemove 事件。如果要实现一个拖拽功能，需要一路监听 mousemove 事件，在回调中获取元素当前位置来进行样式改变。如果不加以控制，每移动一定像素而触发的回调数量非常惊人，回
关于防抖函数的使用
m0_47531829的博客
02-27 1058
前天在修改公司测试提出来的bug时候，用到了防抖函数，导师帮我完成的功能，用到了lodash里面的防抖函数，导师帮我写完之后，感觉防抖函数还是挺懵的，记得当初面试的时候，手写节流防抖，手写promise,手写代码是我最不愿意面对的，昨天弄了一点毕设之后，就在B站上面看up主晓舟报告讲解的节流防抖函数，目前这个是我认为讲的比较不错的，通俗易懂的，今天在公司自己手写了一遍，轻松写出来了，完全没有之前的写js代码逻辑的恐惧了，我想这也是我在实习期间的一个成长吧。包括我每天都会按照老大的建议，把自己的收获和在项目中
防抖函数以及防抖函数的使用
weixin_45875721的博客
06-30 663
当页面刷新比较频繁或者多次调用同一语句时，推荐使用防抖函数或者节流函数来进行调用。下面是防抖函数的代码。 debounce(fn,time){ lettimer=null returnfunction(...args){ if(timer){ clearTimeout(timer) } timer=setTimeout(()=>{ fn.apply(this,args) },time) } ...
防抖函数和节流函数使用
weixin_54217534的博客
07-14 731
于是当一张图片加载完，我们就得调用一次刷新函数，这样当图片多的时候，降低了效率，这个时候就需要用到防抖函数来提高效率)，为了提高效率，我们就可以使用防抖函数来减少调用同一个函数的次数，进而提高效率。，但当详情页中有图片时，虽然组件已挂载完毕，但。(比如当我们在渲染详情页，我们需要获得。当我们在项目中一段时间内需要。...
JS高级——防抖函数
@SCY
02-26 3887
防抖函数具体实现过程
在vue中使用防抖函数组件操作
10-15
在Vue组件中使用这个防抖函数，我们可以将其导入到组件的方法中，例如： ```javascript import { debounce } from 'xxx'; export default { data() { return { vm: this }; }, methods: { toDoSth: debounce...
浅谈JavaScript节流和防抖函数
10-14
防抖函数（Debounce）是另一种限制函数在短时间内触发多次的方法，区别在于它让函数在最后一次停止事件触发后再执行。防抖技术常用于输入框的事件处理，如输入验证、自动完成或搜索建议等。防抖函数通常会等待用户...
防抖与节流的封装函数与使用详解
01-20
下面是一个简单的防抖函数封装示例： ```javascript const debounce = (handler, delay) => { let timer = null; return function() { const _self = this; const _arg = arguments; clearTimeout(timer); ...
节流防抖函数
派大星儿的博客
06-17 541
概念： debounce 防抖 、 throttle 节流 节流 节流的原理很简单： 如果你持续触发事件，每隔一段时间，只执行一次事件。 根据首次是否执行以及结束后是否执行，效果有所不同，实现的方式也有所不同。 我们用 leading 代表首次是否执行，trailing 代表结束后是否再执行一次。 关于节流的实现，有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。 使用时间戳： 让我们来看第一种方法：使用时间戳，当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为 0 )，如
如何解决js函数防抖、节流出现的问题
12-10
React中使用防抖函数和节流函数 在React事件调用时，React传递给事件处理程序是一个合成事件对象的实例。SyntheticEvent对象是通过合并得到的。 这意味着在事件回调被调用后，SyntheticEvent 对象将被重用并且所有...
vue实现手机号码的校验（防抖函数的应用场景）
有梦想的咸鱼前端
09-04 1041
上一篇博文我们讲到了节流函数的应用场景，我们知道了节流函数可以用在模糊查询、scroller、onresize等场景；今天这篇我们来讲防抖函数的应用场景： 　　 　　通过上一篇博文的学习，我们知道了防抖函数的原理：只有在事件触发的时候才会延迟加载，如果在延迟加载之前再次触发，则会刷新延迟时间重新延迟，触发次数有且只有触发一次； 　　 　　如果对防抖函数原理有疑惑，请点击链接跳转到关于防抖函数讲解的...
防抖函数的用法,附代码
juvialoxer的博客
08-21 1252
因为比较简单就不细说,直接上代码了 1.在公共js中config.js中写入 // 防抖 export function debounce(func, wait, immediate) { let timeout return function(...args) { let context = this if (timeout) clearTime...
函数防抖
小白变怪兽
11-23 1956
什么是函数防抖？ 简单来说,函数防抖指的是多次触发事件，事件处理函数只执行一次; 应用场景： 在连续点击查询按钮情况下或者缩放屏幕要触发某个事件等等； 实际应用： 下面来介绍两种实现方法： 点击按钮的最后触发时间 （1）初始化timer为null （2）在初次点击查询按钮的时候， 给timer赋值(赋值函数中触发事件的调用) (3) 如果再次点击那会，timer已经有值， 那就先清除timer再...
JavaScript第 12 篇，JavaScript防抖功能，原生JavaScrip防抖（原生JS防抖函数，防抖功能的应用与解析，手把手教学）
热门推荐
weixin_65793170的博客
04-04 1万+
⭐防抖就是某一高频事件不断被触发时，仅在最后一次真正执行事件处理代码，将多次执行变为最后一次执行，具体点就是我们在触发高频事件后，n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。其实，防抖和节流都是防止函数多次调用。
JS中防抖函数介绍与实现（秒懂如何手写防抖）
最新发布
百赢出品，必属精品
04-01 1726
函数防抖是一种用于限制函数执行频率的技术。在JavaScript中，函数防抖常用于处理频繁触发的事件，如浏览器窗口的resize事件、滚动事件、输入框的输入事件等。它通过延迟函数的执行来确保在一定时间内只执行一次。可以避免频繁触发事件造成不必要的资源消耗或执行结果混乱的情况，而只关注最后一次触发事件的结果。1.当事件被触发时，不立即执行事件处理函数，而是等待一段时间（延迟时间）。2.如果在这段时间内事件再次被触发，则重新计时，延迟时间重新开始计算。3.直到延迟时间内没有再次触发事件，才执行事件处理函数。
简单理解防抖函数
你喜欢大熊猫嘛
06-09 211
防抖函数，什么是防抖函数
lodash防抖函数怎么使用？
05-17
下面是lodash防抖函数的使用方法： 首先，安装lodash库： ``` npm install lodash ``` 然后，在你的JS代码中引入lodash库： ``` import _ from 'lodash'; ``` 最后，使用_.debounce()方法： ``` const ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值