什么是防抖和节流?如何实现防抖和节流?

什么是防抖和节流?如何实现防抖和节流?防抖 Debounce 和节流 Throttle 都是用来控制某个函数在一定时间内触发次数 两者都是为了减少触发频率 以便提高性能或者说避免资源浪费 毕竟 JS 操作 DOM 对象的代价还是十分昂贵的 应用场景 处理一些频繁触发的事件 例如 mousedown mousemove keyup keydown 等 不然的话 页面很可能会十分卡顿哦 防抖防抖就是指触发事件后在 n 秒内函数只能执行一次 如果在 n 秒内又触发了事件 则会重新计算函数执行时间 举个例子吧 例如 你是一个肯德基外卖配送员 每天专门

防抖

防抖就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

那么用代码怎么实现呢?

//接一个订单,和等待时间 function debounce(fn, delay){ 
    let timerId = null return function(){ 
    const context = this //如果接到订单就再等3分钟 if(timerId){ 
   window.clearTimeout(timerId)} //3分钟没有接到订单就直接配送 timerId = setTimeout(()=>{ 
    fn.apply(context, arguments) timerId = null },delay) } } 

节流

节流就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率

那么用代码怎么实现呢?

function throttle(fn, delay){ 
    // 设置一个触发开关 let canUse = true return function(){ 
    //如果为true,就触发技能,否则就不能触发 if(canUse){ 
    fn.apply(this, arguments) //触发技能后,关闭开关 canUse = false //在3秒后打开开关 setTimeout(()=>canUse = true, delay) } } } 
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/233747.html原文链接:https://javaforall.net

(0)
上一篇 2025年6月24日 下午3:01
下一篇 2025年6月24日 下午3:22


相关推荐

  • 《深入理解mybatis原理》 MyBatis的一级缓存实现详解 及使用注意事项

    《深入理解mybatis原理》 MyBatis的一级缓存实现详解 及使用注意事项MyBatis是一个简单,小巧但功能非常强大的ORM开源框架,它的功能强大也体现在它的缓存机制上。MyBatis提供了一级缓存、二级缓存这两个缓存机制,能够很好地处理和维护缓存,以提高系统的性能。本文的目的则是向读者详细介绍MyBatis的一级缓存,深入源码,解析MyBatis一级缓存的实现原理,并且针对一级缓存的特点提出了在实际使用过程中应该注意的事项。读完本文,你将会学到:1、什么是一级缓存?为什么使用一级缓存?2、MyBatis的一级缓存是怎样组织的?(即SqlS

    2022年5月21日
    46
  • jsPlumb笔记

    jsPlumb笔记setup 如果不使用 jQuery 或者类 jQuery 库 则传入的节点得用 id 的形式 否则 jsPlumb 会为元素设置一个 id jsPlumb ready function orjsPlumb bind ready function 最好确认 jsPlumb 加载完毕之后 再开始使用相关功能 默认情况下 jsPlumb 在浏览器的窗口中注册 为整个页

    2026年3月19日
    2
  • 市场上Web 应用防火墙哪家好?

    市场上Web 应用防火墙哪家好?伴随着移动互联网及互联网的发展,办公自动化也成为大势所趋。当企业通过网络办公获得无限便利后,也要时刻关注潜在的网络安全威胁。为了保护数据安全,更多企业都会配备Web应用防火墙设备。在市场上的Web应用防火墙产品应用中,被Gartner魔力象限评为Web应用防火墙领导者的F5公司的产品受到了广泛的关注与好评。 F5被Gartner魔力象限评为Web应用防火墙领导者F5推出的WEB应用防…

    2022年5月5日
    37
  • C中关于重载(overload)介绍(想了解的这儿都有)

    C中关于重载(overload)介绍(想了解的这儿都有)重载的含义是什么 重载有哪些 重载方法 重载函数该怎么写 重载的特点是什么 重载的作用是什么 使用重载时应该注意什么

    2026年1月20日
    2
  • java类加载器是什么_类加载器有几种

    java类加载器是什么_类加载器有几种类加载器是有了解吗?解析:底层原理的考察,其中涉及到类加载器的概念,功能以及一些底层的实现。答:顾名思义,类加载器(classloader)用来加载Java类到Java虚拟机中。一般来说,Java虚拟机使用Java类的方式如下:Java源程序(.java文件)在经过Java编译器编译之后就被转换成Java字节代码(.class文件)。类加载器负责读取Java…

    2022年8月11日
    8
  • 流水线作业调度问题-动态规划(运用Johnson算法)

    流水线作业调度问题-动态规划(运用Johnson算法)思路的重点算法完整代码 把在 M1 上工作的时间看做是先行工序时间 M2 上的工作时间看成后行工序时间 如果某个作业的 M1 时间 gt M2 时间 它就是后行工序 反之 就是先行工序时间 include stdio h include iostream include algorithm definen6 6 个作业 usingnamespa intM1 n 2 7 6 4 6 8 int algorithm iostream stdio h

    2026年3月16日
    1

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号