JS - 函数防抖封装

最新推荐文章于 2024-04-22 10:00:00 发布
最新推荐文章于 2024-04-22 10:00:00 发布
阅读量765 收藏 1
点赞数 1
分类专栏： JavaScript web前端开发 文章标签： 函数防抖封装
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44713430/article/details/102182142
版权
function debounce(fn, delay) { let timerId = null; return function () { let self = this; let args = arguments; timerId && clearTimeout(timerId); timerId...
摘要由CSDN通过智能技术生成
函数防抖[debounce]

函数防抖是优化高频率执行js代码的一种手段
可以让被调用的函数在一次连续的高频操作过程中只被调用一次

函数防抖作用

减少代码执行次数, 提升网页性能

函数防抖应用场景

oninput / onmousemove / onscroll / onresize等事件

封装
function debounce(fn, delay) {
   
    let timerId = null;
    return function () {
   
        <
最低0.47元/天 解锁文章
「已注销」
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【进阶篇】js的防抖节流函数
风中追风
10-09 3769
防抖和节流函数 阅读目录 一 .防抖函数 二 .节流函数 三 .个人理解两者的区别 一、防抖函数 1.1 概念： 　　触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。 1.2 使用场景： 　　就像是我的搜索栏功能，是在里面内容变化后就实时触发搜索事件，但是有时候我们输　　的内容很长，在没有输完的时候就触发了事件，这样对性能来说是不好的，造成了很多　...
js之防抖函数
RayShyy的博客
04-10 6887
防抖原理 事件响应函数在一段时间后才执行，如果这段时间内再次调用，则重新计算执行时间。 意思是如果在规定的时间内无论你怎么触发事件都不会执行，只有在最后一次触发事件后并且在规定的时间内无触发事件操作才会执行。 防抖原理举例(这里以点击按钮为例)： 设置防抖的时间为2秒； 点击一次按钮，则开始倒计时； 如果在2秒内再次点击按钮，则重新从2秒开始倒计时； 如果2秒过后没有再点击按钮，则执行点击按钮对应的事件，否则就再次从2秒开始倒计时。 代码实现(这里以点击按钮为例) 实现过程讲解(使用定时器实现)：
JS中的性能优化——防抖、节流简解
最新发布
Tom299的博客
04-22 1448
1.防抖 1.1.封装防抖函数 1.2.lodash防抖 2.节流 2.1.封装节流函数 2.1.lodash节流 3.区别
JavaScript 函数防抖
m0_54829066的博客
12-23 1544
如果每次用户输入都立即触发函数，会导致函数频繁触发，浪费资源。使用防抖函数，可以在用户输入后延迟一段时间才触发函数，从而节省资源。需要注意的是，这个防抖函数是基于定时器实现的，所以在使用过程中可能会有一些精度问题。当函数被触发时，防抖函数会延迟执行函数，并且如果在延迟期间内再次触发函数，则会重新计算延迟时间。这样可以避免函数在短时间内多次触发，从而节省资源。JavaScript 函数防抖（debounce）是一种技术，可以防止函数在短时间内多次触发。防抖函数返回一个新函数，在新函数中设置了延迟执行的逻辑。
js 函数防抖（debounce）函数节流（throttle）
qq_27009517的博客
07-01 4244
一、什么是函数节流（throttle） 概念：限制一个函数在一定时间内只能执行一次。 举个栗子，坐火车或地铁，过安检的时候，在一定时间（例如10秒）内，只允许一个乘客通过安检入口，以配合安检人员完成安检工作。上例中，每10秒内，仅允许一位乘客通过，分析可知，“函数节流”的要点在于，在一定时间之内，限制一个动作只执行一次。 上图中绿色块表示触发一次事件，持续触发事件时，throttle会合并一定时间内的事件，并在该时间结束时真正去触发一次事件 二、为什么需要函数节流 　　前端开发过程中...
js 函数防抖(debounce)与节流(throttle)
青蛙king的博客
07-21 3707
一、函数防抖 二、函数节流
防抖节流函数js封装模块
10-19
为了方便使用，我们可以将防抖和节流的实现封装成一个 JavaScript 模块。在这个模块中，我们定义了 debounce 和 throttle 两个函数，它们分别实现了防抖和节流功能。 在 debounce 函数中，我们使用一个计时器来延迟...
JS-funcs:JavaScript辅助函数
05-07
JS-funcs可能包含辅助函数来简化这些操作，如`debounce`用于防抖，`throttle`用于节流，还有`delay`用于延迟执行。 7. **错误处理和日志记录**: 辅助函数也可能提供优雅的错误处理和日志记录机制，帮助开发者调试和...
js-utility:JavaScript Utility函数
04-11
这些函数通常被封装在一个库或模块中，以便在多个项目中方便地导入和使用。在"js-utility-main"这个压缩包中，我们可能找到了一个这样的JavaScript实用工具库。 1. **数组处理**： - `arrayEach`: 这个函数可能...
如何解决js函数防抖、节流出现的问题
12-10
所以在用防抖或节流函数封装时，异步方式访问事件对象出现问题。解决的方法如下： 方法一：调用合成事件对象的persist()方法 event.persist && event.persist() //保留对事件的引用 方法二：深拷贝事件对象 cons
Utiljs一些很实用的javaScript函数封装集合
08-12
Util.js 是一个非常实用的JavaScript库，它封装了一系列常见的功能函数，旨在简化开发过程，提高代码的可复用性和效率。这个库涵盖了多种类别，包括处理数组、浏览器特性、日期操作、函数辅助、数学计算、媒体操作、...
js 防抖函数
ZhaojunWang的博客
02-15 142
debounce (func, delay) { let timer = null return function (...args) { if (timer) clearTimeout(timer) timer = setTimeout(() => { // this, func.apply(this, args) }, delay) } }
JS的节流与防抖的目的，区别以及实现方式 （关注收藏，持续更新）
王春燕的博客
04-20 7013
一、节流和防抖的目的： 都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，防止在短时间内频繁触发同一事件而出现延迟，假死或卡顿的现象 二、节流和防抖的区别： 防抖：如果不断在delay之前重新触发，那么定时器会不断重新计时，最终会在最后一次完后才执行，对于需要实时响应的，应该用节流。 节流：目前有一事件A设置了定时器，那么在delay之前触发，都只会触发一次 三、节流和防抖的详解 防抖 debounce（设置1分钟只会执行一次，如果1分钟内又多次触发，会从再次触发开
函数的节流与防抖
温壁
06-20 1562
1、节流--定时器 window.onload = ()=>{ let div = document.getElementById("div"); div.onmousemove = throttle(move,2000); } function move(){ console.log(13546); } function throttle(fn,wait){ var timer = null; return function(){ var
防抖的原理使用和封装
weixin_59362752的博客
02-16 118
防抖的原理应用场景使用和封装
原生JS【节流防抖】源码封装
qq_60619943的博客
02-03 954
节流 <body> <div id="show">0</div> <button id="btn">click</button> <script> let oDiv = document.getElementById('show'); let oBtn = document.getElementById('btn'); // 封装节流函数 /.
JS实现防抖(debounce)及节流(throttle)函数
justforuse的博客
03-12 9591
这两种函数算是应用场景比较广泛的函数了，那么如何实现它呢？ 什么是防抖？什么是节流？ 举例来说，比如要搜索某个字符串，基于性能考虑，肯定不能用户没输入一个字符就发送一次搜索请求，一种方法就是等待用户停止输入，比如过了500ms用户都没有再输入，那么就搜索此时的字符串，这就是防抖；节流比防抖宽松一些，比如我们希望给用户一些搜索提示，所以在用户输入过程中，没过500ms就查询一次相关字符串，这就是...
js高阶函数 函数的节流丶防抖 以及封装方法
m0_62816172的博客
12-04 307
函数节流节流及防抖的介绍： 函数节流：当一个函数在大于等于某个周期时间才执行，如果在周期内是不执行的。 函数防抖：短时间内多次触发一个事件，只执行最后一次，或者执行最开始的一次，当在等待时间内再次触发事件时重新开始计时。 节流的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" .
js 防抖实战讲解
weixin_33775582的博客
05-08 1669
为什么要用防抖技术 在前端开发中会遇到一些频繁的事件触发，比如：window 的 resize、scrollmousedown、mousemovekeyup、keydown……为此，我们举个示例代码来了解事件如何频繁的触发： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt...
js防抖和节流函数封装
07-28
下面是一个简单的防抖函数封装示例： ```javascript function debounce(func, delay) { let timer = null; return function(...args) { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值