JS防抖函数

最新推荐文章于 2024-06-25 01:37:55 发布
最新推荐文章于 2024-06-25 01:37:55 发布
阅读量230 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40532650/article/details/110468953
版权

参考：js 防抖实战讲解_weixin_33775582的博客-CSDN博客

var timer
//跳转指定页面-prev
function jumpPage() {
    if (timer) {
      clearTimeout(timer) //如果200ms内又一次触发，则会重新计算时间
    }
    timer = setTimeout(() => {
      jumpPageNow()
    }, 200)
}

改进-使用闭包

<body>
    <div>
      <input type="text" id="inp" />
    </div>
    <script>
      // 防抖-使用闭包
      function debounce(delay, callBack) {
        let timer;
        return function(value) {
          clearTimeout(timer);
          timer = setTimeout(() => {
            callBack && callBack(value);
          }, delay);
        };
      }
      const logValue = value => {
        console.log(value);
      };
      let inp = document.getElementById("inp");
      //  debounce使用了闭包，返回一个函数，故先把返回函数释放
      let debounceInp = debounce(1000, logValue);
      inp.addEventListener("keyup", function(e) {
        debounceInp(e.target.value);
      });
    </script>
  </body>

贝茵斯都
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【进阶篇】js的防抖节流函数
风中追风
10-09 3843
防抖和节流函数 阅读目录 一 .防抖函数 二 .节流函数 三 .个人理解两者的区别 一、防抖函数 1.1 概念： 　　触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。 1.2 使用场景： 　　就像是我的搜索栏功能，是在里面内容变化后就实时触发搜索事件，但是有时候我们输　　的内容很长，在没有输完的时候就触发了事件，这样对性能来说是不好的，造成了很多　...
javascript防抖函数debounce详解
10-16
JavaScript中的防抖函数(debounce)是一种优化技术，用于限制函数的执行频率，特别是在处理高频触发的事件时，如窗口的滚动、输入框的输入等。防抖函数的主要目的是避免在短时间内重复执行函数，而是等待一段时间无...
js之防抖函数
RayShyy的博客
04-10 6914
防抖原理 事件响应函数在一段时间后才执行，如果这段时间内再次调用，则重新计算执行时间。 意思是如果在规定的时间内无论你怎么触发事件都不会执行，只有在最后一次触发事件后并且在规定的时间内无触发事件操作才会执行。 防抖原理举例(这里以点击按钮为例)： 设置防抖的时间为2秒； 点击一次按钮，则开始倒计时； 如果在2秒内再次点击按钮，则重新从2秒开始倒计时； 如果2秒过后没有再点击按钮，则执行点击按钮对应的事件，否则就再次从2秒开始倒计时。 代码实现(这里以点击按钮为例) 实现过程讲解(使用定时器实现)：
彻底搞懂JavaScript防抖和节流_防抖函数为什么要改变this指向
最新发布
2401_85124851的博客
06-25 460
我们使用一个last来记录上一次执行的时间那么函数执行，并且将now赋值给last即可// this和argumentlast = now;默认情况下，我们的防抖函数最后一次是不会执行的因为没有达到最终的时间，也就是条件now - last > interval满足不了的但是，如果我们希望它最后一次是可以执行的，那么我们可以让其传入对应的参数来控制我们增加了else语句：所以我们可以使用timer变量来记录定时器是否已经开启已经开启的情况下，不需要开启另外一个定时器了。
JS专题之去抖函数
weixin_33713350的博客
12-07 288
一、前言 为什么会有去抖和节流这类工具函数？ 在用户和前端页面的交互过程中，很多操作的触发频率非常高，比如鼠标移动 mousemove 事件, 滚动条滑动 scroll 事件, 输入框 input 事件, 键盘 keyup 事件，浏览器窗口 resize 事件。 在以上事件上绑定回调函数，如果回调函数是一些需要大量计算、消耗内存、HTTP 请求、DOM 操作等，那么应用的性能和体验就会非常的差。 ...
Js防抖函数
AJINNIU的博客
10-31 2497
//防抖函数 当持续出发事件，一定时间内没有在触发事件，事件才会再次执行 如果当设定的时间到来之前 又一次出发触发了事件 就重新开始 直接看代码 <input type="text" id="input"> <script> var input = document.getElementById('input') //防抖的函数 function debounce(delay,callback){ let timer return function (val
js防抖函数和节流函数使用场景和实现区别示例分析
10-15
JavaScript中的防抖函数（debounce）和节流函数（throttle）是优化性能的关键工具，它们常用于处理高频触发的事件，如窗口的resize、scroll事件，输入框的input事件等。这些事件如果不加以控制，可能会导致浏览器...
如何解决js函数防抖、节流出现的问题
12-10
React中使用防抖函数和节流函数 在React事件调用时，React传递给事件处理程序是一个合成事件对象的实例。SyntheticEvent对象是通过合并得到的。 这意味着在事件回调被调用后，SyntheticEvent 对象将被重用并且所有...
js 防抖函数
ZhaojunWang的博客
02-15 151
debounce (func, delay) { let timer = null return function (...args) { if (timer) clearTimeout(timer) timer = setTimeout(() => { // this, func.apply(this, args) }, delay) } }
JavaScript 函数防抖
m0_54829066的博客
12-23 1576
如果每次用户输入都立即触发函数，会导致函数频繁触发，浪费资源。使用防抖函数，可以在用户输入后延迟一段时间才触发函数，从而节省资源。需要注意的是，这个防抖函数是基于定时器实现的，所以在使用过程中可能会有一些精度问题。当函数被触发时，防抖函数会延迟执行函数，并且如果在延迟期间内再次触发函数，则会重新计算延迟时间。这样可以避免函数在短时间内多次触发，从而节省资源。JavaScript 函数防抖（debounce）是一种技术，可以防止函数在短时间内多次触发。防抖函数返回一个新函数，在新函数中设置了延迟执行的逻辑。
javascript防抖函数
黄星的专栏
11-23 96
debounce(防抖) 多次执行，最后只执行一次 function debounce(fn, delay = 50) { let timer = null return function (...args) { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { fn(...args) }, delay) } } const debounceObj =
js实现 防抖函数
睡觉不打呼噜的博客
06-18 467
js实现 防抖函数 为什么要有 防抖函数 ？ 我们的input输入框，每一次输入都会连续触发事件，如果事件中都会去服务器请求数据的话， 太过于频繁请求，对我们的服务器造成巨大压力。 而我们只需等到用户没有输入信息时，延迟一会再向服务器请求数据就好了。 比起：连续发请求 和 只发一次请求，后者最佳。 ... 防抖函数 的使用场合： input输入框的实时输入事件：oninput，当没有输入时才发请求。 过于频繁的事件触发。 ... 结构如下： <input type="text" id="inpu
js函数防抖 节流
csl125的博客
06-23 204
一、什么是函数防抖 概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。 二、为什么需要函数防抖 　　前端开发过程中，有一些事件，常见的例如，onresize，scroll，mousemove,mousehover等，会被频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的..
防抖函数
qq_42076140的博客
09-29 143
多次调用函数会影响性能或效果 利用防抖函数可以提高的性能，减轻服务端压力(用户名验证邮箱验证调用接口)、改善效果（连续、多次的请求loading关闭会一闪一闪） // debounce.js 防抖封装 let timer = null const debounce = (fn, wait = 500) => { if (timer !== null) clearTimeout(timer) timer = setTimeout(() => { timer = nul..
js 防抖节流函数
weixin_45662100的博客
03-17 127
js 防抖节流函数 防抖(debounce) 在前端开发中用户会频繁的触发事件执行,会消耗资源，会导致浏览器卡顿或者服务器崩溃。 例如 : 搜索引擎 发送关键字给服务器，若是用户打错或打多关键字，引擎都会立马发送给服务器，这就会造成连续访问伏虎器导致服务器崩溃。防抖函数则要避免该情况发生，在用户输入完关键字之后延时一段时间在发送请求。 <input type="text" id="ipt"> <script> // 获取输入框 var ipt
Js防抖函数（详细注释）
c_studer_的博客
03-19 321
防抖是指短时间内大量触发同一事件，只会在最后一次事件完成后延迟执行一次函数。例如，在输入用户名的过程中，需要反复验证用户名。此时，您应该等待用户停止输入，然后进行验证，否则将影响用户体验。防抖实现的原理是在触发事件后设置计时器。在计时器延迟过程中，如果事件再次触发，则重置计时器。在没有触发事件之前，计时器将再次触发并执行相应的功能。
js防抖函数
05-24
下面是一个简单的 JavaScript 防抖函数的实现： ```javascript function debounce(func, delay) { let timer = null; return function() { const context = this; const args = arguments; clearTimeout(timer...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值