首页 > 其他分享 >防抖与节流机制

防抖与节流机制

时间:2024-07-04 09:32:21浏览次数:15  
标签:function 防抖 节流 args let timeout 机制

防抖与节流:

本质上是优化高频率执行代码的一种手段

浏览器的 resizescrollkeypressmousemove 等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能

为了优化体验,需要对这类事件进行调用次数的限制,对此我们就可以采用 防抖(debounce)节流(throttle) 的方式来减少调用频率

  • 节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效

  • 防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时

1.节流

使用时间戳写法,事件会立即执行,停止触发后没有办法再次执行

function throttled1(fn, delay = 500) {
   let oldtime = Date.now()
   return function (...args) {
       let newtime = Date.now()
       if (newtime - oldtime >= delay) {
           fn.apply(null, args)
           oldtime = Date.now()
      }
  }
}

使用定时器写法,delay毫秒后第一次执行,第二次事件停止触发后依然会再一次执行

function throttled2(fn, delay = 500) {
   let timer = null
   return function (...args) {
       if (!timer) {
           timer = setTimeout(() => {
               fn.apply(this, args)
               timer = null
          }, delay);
      }
  }
}

可以将时间戳写法的特性与定时器写法的特性相结合,实现一个更加精确的节流。实现如下

function throttled(fn, delay) {
   let timer = null
   let starttime = Date.now()
   return function () {
       let curTime = Date.now() // 当前时间
       let remaining = delay - (curTime - starttime)  // 从上一次到现在,还剩下多少多余时间
       let context = this
       let args = arguments
       clearTimeout(timer)
       if (remaining <= 0) {
           fn.apply(context, args)
           starttime = Date.now()
      } else {
           timer = setTimeout(fn, remaining);
      }
  }
}

2.防抖

简单版本实现

function debounce(func, wait) {
   let timeout;

   return function () {
       let context = this; // 保存this指向
       let args = arguments; // 拿到event对象

       clearTimeout(timeout) // 清除之前的延时器,只保留最后一个执行
       timeout = setTimeout(function(){
           func.apply(context, args)
      }, wait);
  }
}

立即执行一次

function debounce(func, wait, immediate) {

   let timeout;

   return function () {
       let context = this;
       let args = arguments;

       if (timeout) clearTimeout(timeout); // timeout 不为null
       if (immediate) {
           let callNow = !timeout; // 第一次会立即执行,以后只有事件执行后才会再次触发
           timeout = setTimeout(function () {
               timeout = null;
          }, wait)
           if (callNow) {
               func.apply(context, args)
          }
      }
       else {
           timeout = setTimeout(function () {
               func.apply(context, args)
          }, wait);
      }
  }
}

3.相同点:

  • 都可以通过使用 setTimeout 实现

  • 目的都是,降低回调执行频率。节省计算资源

4.不同点:

  • 函数防抖,在一段连续操作结束后,处理回调,利用clearTimeoutsetTimeout实现。函数节流,在一段连续操作中,每一段时间只执行一次,频率较高的事件中使用来提高性能

  • 函数防抖关注一定时间连续触发的事件,只在最后执行一次,而函数节流一段时间内只执行一次

例如,都设置时间频率为500ms,在2秒时间内,频繁触发函数,节流,每隔 500ms 就执行一次。防抖,则不管调动多少次方法,在2s后,只会执行一次

5.应用

防抖在连续的事件,只需触发一次回调的场景有:

  • 搜索框搜索输入。只需用户最后一次输入完,再发送请求

  • 手机号、邮箱验证输入检测

  • 窗口大小resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。

节流在间隔一段时间执行一次回调的场景有:

  • 滚动加载,加载更多或滚到底部监听

  • 搜索框,搜索联想功能

标签:function,防抖,节流,args,let,timeout,机制
From: https://www.cnblogs.com/xxaxf/p/18282946

相关文章

  • 客服系统回调机制,私信自动回复回调第三方,客服回复回调第三方
    演示网站gofly.v1kf.com针对私信自动回复的客户有一个需求,他对接的是认证的企业号。当用户进入他的私信绘画页发送消息后,他希望在自己的系统里获取这条消息,并把这条消息入库以及调用自己程序内部的AI进行处理。处理完成后,再将回复结果回复给用户。为了实现这一需求,需要在客服......
  • 2025秋招计算机视觉面试题(七)-NMS详细工作机制及代码实现
    问题看到一句话:NMS都不懂,还做什么Detection!虎躯一震……懂是大概懂,但代码能写出来吗???在目标检测网络中,产生proposal后使用分类分支给出每个框的每类置信度,使用回归分支修正框的位置,最终会使用NMS方法去除同个类别当中IOU重叠度较高且scores即置信度较低的那些......
  • 深入理解Qt的隐式共享机制
    在Qt中,一个关键的性能优化特性是其数据结构的隐式共享机制,这在Qt的文档和API中常被称为“隐式共享”或“写时复制(Copy-On-Write,COW)”。本文将详细介绍这一机制,并通过QString类的实现代码和相应的反汇编代码来阐释其工作原理。隐式共享的定义和优点隐式共享是一种内存管......
  • Nginx超时重试、保护机制
    1.超时配置http{upstreambackend{serverbackend1.example.com;serverbackend2.example.com;serverbackend3.example.com;}server{location/{proxy_passhttp://backend;proxy_connec......
  • termsrv.dll 是实现 Windows 远程桌面服务的核心组件,它通过上述机制和功能,支持了在企
    远程桌面协议(RemoteDesktopProtocol,RDP)是由微软开发的一种专用协议,用于在网络上进行远程桌面会话和远程应用程序的访问。它允许用户从一个计算机(称为客户端)远程控制另一个计算机(称为服务器),而无需物理上位于服务器旁边。WindowsRDP的底层原理:客户端-服务器架构:客户端:用户......
  • GGTalk 开源即时通讯系统源码剖析之:聊天消息防错漏机制
    继上篇《GGTalk开源即时通讯系统源码剖析之:客户端全局缓存及本地存储》GGTalk客户端的全局缓存以及客户端的本地持久化存储。接下来我们将介绍GGTalk的聊天消息防错漏机制。GGTalkV8.0 对消息的可靠性,即消息的不丢失和不重复做了一系列优化处理,以保证不会错漏消息。这篇文......
  • YOLOv10改进 | 注意力篇 | YOLOv10引入24年最新Mamba注意力机制MLLAttention
    1. MLLAttention介绍1.1 摘要: Mamba是一种有效的状态空间模型,具有线性计算复杂度。最近,它在处理各种视觉任务的高分辨率输入方面表现出了令人印象深刻的效率。在本文中,我们揭示了强大的Mamba模型与线性注意力Transformer具有惊人的相似之处,而线性注意力Transform......
  • YOLOv10改进教程|C2f-CIB加入注意力机制
      一、导读    论文链接:https://arxiv.org/abs/2311.11587    代码链接:GitHub-CV-ZhangXin/AKConv YOLOv10训练、验证及推理教程二、C2f-CIB加入注意力机制2.1复制代码        打开ultralytics->nn->modules->block.py文件,复制SE......
  • Qt:6.QWidget属性介绍(windowTitle、windowIcon、windowOpacity)以及QRC机制
    一、windowTitle属性-窗口标题:1.1windowTitle属性介绍:在Qt中,windowTitle属性是QWidget类提供的一个属性,用于设置和获取窗口的标题文本。它通常用于设置顶级窗口的标题栏显示内容。1.2设置窗口标题——setWindowTitle():widget->setWindowTitle("这是窗口标题");1......
  • 深入MySQL锁机制:原理、死锁解决及Java防范技巧
    引言在数据库系统中,锁机制是为了保证数据一致性和完整性的重要手段。MySQL作为广泛使用的关系型数据库管理系统,其锁机制尤为重要。本文将详细介绍MySQL的锁机制原理及实现,并说明在生产环境中如何解决死锁问题,以及在后续开发中如何编写Java代码避免死锁。MySQL锁机制概述MySQ......