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

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


相关推荐

  • 大一新生应该如何学习C语言,书上代码看不懂理解不了怎么办?

    大一新生应该如何学习C语言,书上代码看不懂理解不了怎么办?大家好,我是二哥呀!昨天有个读者问我要C语言的学习路线,他今年刚上大一,书上的代码完全看不懂。讲真,大一新生,一般都是零基础的纯小白,看不懂书上的代码很正常,除非是小学、初中、高中就开始卷计算机的硬核少年;或者是因为教材选的有问题。那刚好二哥之前整理过一些学习C语言的资料和学习方法,今天趁这个机会就再做个汇总和梳理。推荐一本书,两门视频课,若干学习建议,看完后如果还看不懂、理解不了C语言,过来骂我、捶我,只要不要打脸就行。01)阮一峰老师的C语言入门教程这个教程是开源的,采用知识共享许可

    2022年6月11日
    35
  • list转json字符串再转回list

    list转json字符串再转回listList<String>words=newArrayList<>();words.add(“好汉”);words.add(“壮士”);StringwordsJson=JsonUtil.javaBeanToJson(words);List<String>list=JsonUtil.jsonArrayToList(wordsJson,Stri…

    2022年10月17日
    5
  • gmm回归stata命令_gmm模型stata命令

    gmm回归stata命令_gmm模型stata命令一、解释变量内生性检验首先检验解释变量内生性(解释变量内生性的Hausman检验:使用工具变量法的前提是存在内生解释变量。Hausman检验的原假设为:所有解释变量均为外生变量,如果拒绝,则认为存在内生解释变量,要用IV;反之,如果接受,则认为不存在内生解释变量,应该使用OLS。regldilofdiestimatesstoreolsxtivregldi(lofdi=l.lofd…

    2022年10月8日
    5
  • MyBatis Log Plugin激活码买(注册激活)2022.02.23

    (MyBatis Log Plugin激活码买)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年4月1日
    88
  • JPA(二)JPA配置

    JPA(二)JPA配置一 依赖导入 以 maven 工程导入坐标为例 lt properties gt lt project build sourceEncodi gt UTF 8 lt project build sourceEncodi gt lt project hibernate version gt 5 0 7 Final lt project hibe

    2025年7月16日
    4
  • idea2022.01.13激活码永久[最新免费获取]2022.02.05

    (idea2022.01.13激活码永久)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html76VF8VOVJM-eyJsaWNlbnNlSW…

    2022年4月1日
    104

发表回复

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

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