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

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


相关推荐

  • SMTP服务器地址_imap服务器怎么设置

    SMTP服务器地址_imap服务器怎么设置认识SMTP服务器首先要知道SMTP,SMTP是“SimpleMailTransferProtocol”的缩写,即简单电子邮件传输协议,而SMTP服务器就是遵循SMTP协议发送电子邮件的服务器,用来发送或中转用户发出的电子邮件。SMTP协议是一个相对简单、高效的文本协议,使用25端口,属于TCP/IP协议族,可以帮助每台SMTP服务器在发送或中转电子邮件时找到下一个目的地,要为一个给定的域名决定…

    2022年10月3日
    6
  • C语言学习——sprintf函数详细解释及其用法

    C语言学习——sprintf函数详细解释及其用法sprintf指的是字符串格式化命令,函数声明为 int sprintf(char *string, char *format [,argument,…]);,主要功能是把格式化的数据写入某个字符串中,即发送格式化输出到 string 所指向的字符串。sprintf 是个变参函数。使用sprintf 对于写入buffer的字符数是没有限制的,这就存在了buffer溢出的可能性。解决这个问题,可以…

    2022年8月18日
    6
  • emwin 界面设计_emwin image控件

    emwin 界面设计_emwin image控件图中蓝色那一句,在WM_PAINT中绘制。

    2022年10月14日
    4
  • 添加音乐的HTML标签是,添加背景音乐的html标签是哪个[通俗易懂]

    添加音乐的HTML标签是,添加背景音乐的html标签是哪个[通俗易懂]添加背景音乐的html标签是哪个发布时间:2020-11-1710:26:08来源:亿速云阅读:120作者:小新了解添加背景音乐的html标签是哪个?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!添加背景音乐的html标签是,bgsound是用以插入背景音乐,但只适用于IE,在netscape和firefox中并不…

    2022年7月25日
    9
  • A2W W2A A2T T2A _T() 含义以及用法

    A2W W2A A2T T2A _T() 含义以及用法A2W、W2A、A2T、T2A _T() 的含义及使用方法1、A2W和W2A在《Window核心编程》,多字节和宽字节之间转换比较麻烦的,MultiByteToWideChar函数和WideCharToMultiByte函数有足够多的参数的意义让我们去理解。那么使用ATL的一个很好的字符串的转换宏:A2W和W2A。char:8位字节类型,表示ASCII码WCHAR:16位字符类型,表示Un…

    2022年8月18日
    4
  • [转]Win 10 的 Win 按键没反应

    [转]Win 10 的 Win 按键没反应来自:http://www.pc0359.cn/article/win10/66397.html方法步骤:  1、首先我们需要将任务管理器运行出来。方法有两种,第一种:使用鼠标右键单击屏幕下方的任务栏,在弹出的选框中单击“任务管理器”即可打开;第二种:使用快捷键:Ctrl+Shift+Esc将其调出来。  2、进入任务管理器界面之后,结束桌面窗口管理器任务。  3、会…

    2022年5月12日
    35

发表回复

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

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