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

什么是防抖和节流?如何实现防抖和节流?防抖 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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • MFC 对话框Picture Control(图片控件)中静态和动态显示Bmp图片

    MFC 对话框Picture Control(图片控件)中静态和动态显示Bmp图片最近有同学问我如何实现 MFC 基于对话框在图片控件中加载图片 其实使用 MFC 显示图片的方法各种各样 但是还是有些同学不知道怎样显示 以前在 数字图像处理 课程中完成的软件都是基于单文档的程序 这里介绍两种在对话框 picthre 控件中显示 BMP 图片的最简单基础的方法 方法可能并不完美 高手忽略 但是提供一种能运行的方法 希望对刚接触这方面知识的同学有所帮助 可能你觉得

    2025年10月26日
    2
  • 如何锁定表头和表行同时锁定_jquery表头固定列

    如何锁定表头和表行同时锁定_jquery表头固定列前段时间需要这个功能,但是找了很多都不能完美的实现,不是只能锁定表头,就是浏览器兼容问题什么的,在此就自己做了一个锁定表头和列的js方法,依赖于JQuery。如使用jQuery1.9.x及以上版本,需

    2022年8月5日
    13
  • NAVCAT15 激活码【中文破解版】

    (NAVCAT15 激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html2KLKA7BQFO-eyJsa…

    2022年4月1日
    51
  • Java程序设计(基础)- 数组[通俗易懂]

    Java程序设计(基础)- 数组[通俗易懂]Java程序设计(基础)- 数组

    2022年4月22日
    46
  • 物联网操作系统的体系构架(物联网系统怎么开发)

    1.       物联网的主要特点                       i.             连接所谓连接,指的是各种各样的终端设备,都能够通过某种网络技术,连接到一个统一的网络上。任何终端之间都可以相互访问。下一代的基础通信网络,包括未来的5G,通信网络架构重构等,为物联网提供泛连接网络是核心目标。目前也已经有很多厂商推出解决方案,比如Google的thread/wave,华

    2022年4月12日
    46
  • java8 groupingby_Java8stream中利用groupingBy进行多字段分组求和

    java8 groupingby_Java8stream中利用groupingBy进行多字段分组求和对集合按照单个属性分组、分组计数、排序Listitems=Arrays.asList(“apple”,”apple”,”banana”,”apple”,”orange”,”banana”,”papaya”);//分组Map>result1=items.stream().collect(Collectors.groupingBy(Function.identity()));…

    2022年8月20日
    16

发表回复

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

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