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

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


相关推荐

  • 惠普服务器磁盘阵列配置及故障修复「建议收藏」

    惠普服务器磁盘阵列配置及故障修复「建议收藏」设备上电开机,按键盘F10.稍等片刻进入开机界面》》》》》》惠普服务器磁盘阵列配置Raid1/Raid0惠普服务器磁盘阵列的设置是安装操作系统的先决条件。只有完成了磁盘阵列的设置才能正常使用。HPDL388Gen9系列,配两块HDD硬盘。步骤如下:https://jingyan.baidu.com/article/e3c78…

    2022年5月29日
    49
  • idea配置Tomcat_tomcat docbase

    idea配置Tomcat_tomcat docbaseidea配置tomcaterror:duplicatecontextpath 解决方法:    在editconfig中部署tomcat,     server         tomcathome            D:\software……\apache-tomcat-7.0.65   …

    2022年9月17日
    0
  • webstorm2021激活码(JetBrains全家桶)

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

    2022年3月21日
    149
  • Unity 协程

    Unity 协程协程前言调用方式停止方式yiledreturn语句执行时机WaitForSeconds(floatTime)WaitForSecondsRealtime(floattime)WaitForEndOfFrame()WaitForFixedUpdate()WaitUntil(Funcpredicate)WaitWhile(Funcpredicate)实现自定义函数实际开发中使用建议前言协程是unity提供的一个特殊的机制,他的特点就是可以方便的实现流程化的东西。但是就他的效率而言个人感觉并不乐观,

    2022年6月15日
    49
  • html怎么隐藏播放器_css遮罩

    html怎么隐藏播放器_css遮罩<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><metaname=”viewport”content=”width=device-width,initial-scale=1.0″><metahttp-equiv=”X-UA-Compatible”content=”ie=edge”><title>视.

    2025年5月26日
    0
  • 解析PHP跳出循环的方法以及continue、break、exit的区别介绍

    解析PHP跳出循环的方法以及continue、break、exit的区别介绍

    2021年10月21日
    68

发表回复

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

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