什么是防抖和节流?如何理解它们并在不同的场景条件下灵活运用?

🙋‍♂️ 什么是防抖和节流?

防抖(Debouncing)和节流(Throttling)是两种常见的性能优化技术,常用于控制某些操作(例如事件处理器)的频率,从而减少资源消耗并提高性能。

防抖(Debouncing)

防抖是一种在事件被触发后等待一段时间,如果在等待时间内没有再次触发该事件,则执行事件处理器。如果在等待时间内再次触发事件,则重新开始等待。常用于避免短时间内频繁触发的事件处理,例如窗口调整大小、搜索框输入等。

示例代码(JavaScript)
function debounce(func, wait) {let timeout;return function(...args) {const context = this;clearTimeout(timeout);timeout = setTimeout(() => func.apply(context, args), wait);};
}// 示例用法
window.addEventListener('resize', debounce(() => {console.log('Window resized');
}, 300));

在这个示例中,当窗口大小变化时,只有在窗口大小停止变化后的300毫秒,console.log('Window resized') 才会被执行。

📹 视频演示(video)

防抖视频

节流(Throttling)

节流是一种在一定时间间隔内只允许函数执行一次,无论该时间间隔内事件被触发了多少次。常用于控制高频率触发的事件处理,例如滚动、鼠标移动等。

示例代码(JavaScript)
function throttle(func, limit) {let lastFunc;let lastRan;return function(...args) {const context = this;if (!lastRan) {func.apply(context, args);lastRan = Date.now();} else {clearTimeout(lastFunc);lastFunc = setTimeout(() => {if ((Date.now() - lastRan) >= limit) {func.apply(context, args);lastRan = Date.now();}}, limit - (Date.now() - lastRan));}};
}// 示例用法
window.addEventListener('scroll', throttle(() => {console.log('Window scrolled');
}, 1000));

在这个示例中,当窗口滚动时,console.log('Window scrolled') 最多每隔1秒执行一次。

📹 视频演示(video)

节流视频

🏁 总结

  • 防抖:在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。
  • 节流:在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。

🙋‍♂️ 窗口滚动事件一定得用节流吗?不可以使用防抖吗?

窗口滚动事件使用节流和防抖都可以,但取决于具体需求和效果。

使用防抖处理滚动事件

防抖会在用户停止滚动后的一段时间才执行函数,这在某些场景下是有用的,例如:

  • 仅在用户停止滚动时加载数据或执行某些操作。
  • 避免在滚动过程中频繁执行函数,而仅在滚动结束时执行。
示例代码
window.addEventListener('scroll', debounce(() => {console.log('Scroll event detected after scrolling stops');
}, 200));

在这个示例中,只有当用户停止滚动200毫秒后,console.log('Scroll event detected after scrolling stops') 才会被执行。

使用节流处理滚动事件

节流会在用户滚动过程中每隔一段时间执行一次函数,这在需要频繁更新页面内容的场景下非常有用,例如:

  • 实时更新滚动进度条。
  • 在滚动过程中动态加载数据(如无限滚动)。
示例代码
window.addEventListener('scroll', throttle(() => {console.log('Scroll event detected with throttling');
}, 1000));

在这个示例中,console.log('Scroll event detected with throttling') 会在用户滚动过程中最多每隔1秒执行一次。

选择防抖还是节流

  • 防抖:适用于在用户停止滚动后执行操作。例如,停止滚动后加载更多内容或进行一次性计算。
  • 节流:适用于在滚动过程中需要持续执行操作。例如,实时更新界面元素或加载滚动区域内的内容。

🏁 总结

  • 滚动停止后的操作:使用防抖。
  • 滚动过程中的持续操作:使用节流。

根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。

🙋‍♂️ Vue3组合式 + TypeScript 写法

使用 Vue 3组合式 和 TypeScript语法, 实现窗口调整大小的防抖(debouncing)和滚动事件的节流(throttling)

1. 窗口调整大小的防抖(Debouncing)

<template><div><p>Resize the window and check the console for debounced resize events.</p></div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';// 防抖函数
function debounce<T extends (...args: any[]) => void>(func: T, wait: number) {let timeout: ReturnType<typeof setTimeout>;return function(this: any, ...args: Parameters<T>) {const context = this;clearTimeout(timeout);timeout = setTimeout(() => func.apply(context, args), wait);};
}// 防抖处理函数
const handleResize = debounce(() => {console.log('Window resized (debounced)');
}, 300);// 注册和注销事件监听
onMounted(() => {window.addEventListener('resize', handleResize);
});onUnmounted(() => {window.removeEventListener('resize', handleResize);
});
</script>

2. 滚动事件的节流(Throttling)

<template><div><p>Scroll the page and check the console for throttled scroll events.</p><div style="height: 2000px;">Scroll content</div></div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';// 节流函数
function throttle<T extends (...args: any[]) => void>(func: T, limit: number) {let lastFunc: ReturnType<typeof setTimeout>;let lastRan: number | undefined;return function(this: any, ...args: Parameters<T>) {const context = this;if (!lastRan) {func.apply(context, args);lastRan = Date.now();} else {clearTimeout(lastFunc);lastFunc = setTimeout(() => {if ((Date.now() - lastRan) >= limit) {func.apply(context, args);lastRan = Date.now();}}, limit - (Date.now() - lastRan));}};
}// 节流处理函数
const handleScroll = throttle(() => {console.log('Scroll event detected (throttled)');
}, 1000);// 注册和注销事件监听
onMounted(() => {window.addEventListener('scroll', handleScroll);
});onUnmounted(() => {window.removeEventListener('scroll', handleScroll);
});
</script>

说明

  1. 防抖(Debouncing):

    • 实现:当窗口大小调整事件触发时,handleResize 函数会在300毫秒内没有进一步的调整后才执行。
    • 用法:当用户调整窗口大小时,防止过多频繁地处理事件,提升性能。
  2. 节流(Throttling):

    • 实现handleScroll 函数会在每1秒内最多执行一次,以控制滚动事件处理的频率。
    • 用法:减少滚动过程中处理事件的频率,优化性能和用户体验。

在 Vue 3 中使用 <script setup lang="ts"> 可以方便地处理生命周期事件,如组件挂载 (onMounted) 和卸载 (onUnmounted),以便正确地添加和移除事件监听器。

当然,你可以将上面的防抖节流函数进行封装公用方法,供组件或模块使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/43767.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Diffusion 公式推导 2

Diffusion 公式推导 中对 DDPM 进行了推导&#xff0c;本文接着对 DDIM 进行推导。 目录 六. 模型改进 六. 模型改进 从扩散模型的推理过程不难看出&#xff0c;DDPM 有一个致命缺点 —— 推理速度过慢&#xff0c;因为逆扩散是从 x T x_{T} xT​ 到 x 0 x_{0} x0​ 的完整过…

ubuntu 如何解压tar

在Ubuntu中解压.tar文件&#xff0c;可以使用tar命令。以下是解压.tar文件的命令&#xff1a; tar -xvf file.tar 解释&#xff1a; x 表示解压 v 表示显示过程中的详细信息&#xff08;可选&#xff09; f 表示后面跟文件名 这将在当前目录下解压file.tar文件的内容。如果…

语义分割和实例分割区别?

语义分割&#xff1a;将图像中的每个像素分配给其对应的语义类别&#xff0c;其主要针对于像素&#xff0c;或者说它是像素级别的图像分割方法。&#xff1a;语义分割的目的是为了从像素级别理解图像的内容&#xff0c;并为图像中的每个像素分配一个对象类。 实例分割&#xf…

【HarmonyOS NEXT】鸿蒙线程安全容器集collections.TypedArray

collections.TypedArray 一种线性数据结构&#xff0c;底层基于ArkTS ArrayBuffer实现。目前支持包括Int8Array、Uint8Array、Int16Array、Uint16Array、Int32Array以及Uint32Array。 文档中存在泛型的使用&#xff0c;涉及以下泛型标记符&#xff1a; TypedArray: 指上述6种…

Laravel Excel导出功能:高效实现数据导出

Laravel是一个功能丰富的PHP Web开发框架&#xff0c;它提供了许多内置功能来简化开发过程。其中&#xff0c;Laravel Excel导出功能是处理数据导出任务的强大工具。通过使用Maatwebsite的Laravel Excel包&#xff0c;开发者可以轻松地将数据集导出为Excel文件&#xff0c;这对…

软件代码漏洞风险等级

代码漏洞的风险等级通常根据漏洞的潜在影响、利用难易程度以及可能造成的损害程度来划分。不同的组织或机构可能会采用不同的标准或评分系统来评估漏洞的风险等级。以下是一些常见的代码漏洞风险等级划分标准和考虑因素: 通用漏洞评分系统(CVSS) CVSS是一种广泛使用的漏洞…

DMA方式的知识点笔记

苏泽 “弃工从研”的路上很孤独&#xff0c;于是我记下了些许笔记相伴&#xff0c;希望能够帮助到大家 目录 1. DMA基本概念 2. DMA传送过程 易错点 DMA控制器操作流程 3. DMA传送方式 这是单总线的结果 &#xff08;CPU说了算 所以不会产生于CPU的冲突&#xff09; 这…

新浪API系列:支付API打造无缝支付体验,畅享便利生活(3)

在当今数字化时代&#xff0c;支付功能已经成为各类应用和平台的必备要素之一。作为开发者&#xff0c;要构建出安全、便捷的支付解决方案&#xff0c;新浪支付API是你不可或缺的利器。新浪支付API提供了全面而强大的接口和功能&#xff0c;帮助开发者轻松实现在线支付的集成和…

软件开发面试题(C#语言,.NET框架)

1. 解释什么是委托&#xff08;Delegate&#xff09;&#xff0c;并举例说明它在C#中的用法。 委托是一种引用类型&#xff0c;它可以用于封装一个或多个方法。委托对象可以像方法一样调用&#xff0c;甚至可以用于创建事件处理程序。委托是C#中实现事件和回调函数的重要机制。…

【PyTorch][chapter 26][李宏毅深度学习][attention-1]

前言&#xff1a; attention 在自然语言处理&#xff0c;声音处理里面是一个很重要的技巧. attention 要解决的是输入的向量长度不定. 根据输入输出的不同,分为三种场景&#xff1a; 输入N个向量&#xff0c;输出N个向量,这是本章的重点 输入N个向量&#xff0c;输出向量不定 输…

人工智能与技术失业:历史教训与未来趋势

在1938年大萧条时期&#xff0c;MIT校长卡尔康普顿讨论了“技术失业”&#xff0c;即因技术进步导致的失业现象。他认为&#xff0c;尽管技术进步会对个别工人和社区产生负面影响&#xff0c;但从整体上看&#xff0c;技术进步创造了更多的就业机会。这一观点在今天依然具有重要…

施罗德数列SQL实现

在组合数学中,施罗德数用来描述从(0,0)到(n,n)的格路中,只能使用(1,0)、(0,1)、(1,1)三种移动方式,始终位于对角线下方且不越过对角线的路径数 DECLARE n INT 10 DECLARE i INT DECLARE rst INT DECLARE old INT1CREATE TABLE #rst (i INT ,rst int )INSERT INTO #rst values(…

react使用markdown进行展示

有一些文档非常长&#xff0c;但是又要挨个设置样式&#xff0c;直接用 组件库 - marked 注意文档要放在public下才能读取。但非常方便 import { marked, Renderer } from "marked".....const [html, setHtml] useState<any>("")const renderer:…

3-7 使用深度学习解决温度即示数问题

3-7 使用深度学习解决温度即示数问题 直接上代码 %matplotlib inline import matplotlib.pyplot as plt import numpy as np import torch torch.set_printoptions(edgeitems2, linewidth75)设置Jupyter Notebook在单元格中内嵌显示图像&#xff0c;导入所需库并设置PyTorch的…

代码随想三刷动态规划篇10

代码随想三刷动态规划篇10 300. 最长递增子序列题目代码 674. 最长连续递增序列题目代码 718. 最长重复子数组题目代码 1143. 最长公共子序列题目代码 1035. 不相交的线题目代码 300. 最长递增子序列 题目 链接 代码 class Solution {public int lengthOfLIS(int[] nums) {…

裸金属服务器与物理服务器之间的区别

裸金属服务器与物理服务器之间主要的区别就在于虚拟化技术、资源共享和灵活性等多种方面。 裸金属服务器主要是通过虚拟化技术将物理服务器划分成多个独立的虚拟机&#xff0c;致使每个虚拟机都具有独立的操作系统与资源&#xff1b;物理服务器则是指有着独立的服务器硬件&…

阿里发布大模型发布图结构长文本处理智能体,超越GPT-4-128k

随着大语言模型的发展&#xff0c;处理长文本的能力成为了一个重要挑战。虽然有许多方法试图解决这个问题&#xff0c;但都存在不同程度的局限性。最近&#xff0c;阿里巴巴的研究团队提出了一个名为GraphReader的新方法&#xff0c;通过将长文本组织成图结构&#xff0c;并利用…

0. python面试常见问题

这里写目录标题 1.python迭代器和生成器1.1 迭代器1.2 生成器1.3 总结一下迭代器和生成器的应用场景 什么是装饰器&#xff08;decorator&#xff09;Python中如何实现多线程-GIL&#xff08;全局解释器锁&#xff09; 知乎&#xff1a;python面试170题 知乎&#xff1a;30道py…

2,区块链、数字货币及其应用场景(react+区块链实战)

2&#xff0c;区块链、数字货币及其应用场景&#xff08;react区块链实战&#xff09; 一、什么是区块链&#xff1f;1 ibloackchain&#xff08;1&#xff09;安装ibloackchain&#xff08;2&#xff09;Blance查询余额&#xff08;3&#xff09;Mine挖矿&#xff08;4&#x…

JavaScript中的拷贝技术探秘:浅拷贝与深拷贝的奥秘

最新技术资源&#xff08;建议收藏&#xff09; https://www.grapecity.com.cn/resources/ 前言 JavaScript中的浅拷贝和深拷贝是非常重要的概念&#xff0c;它们在处理对象和数组时具有不同的作用。在编程中&#xff0c;经常需要复制数据以便进行各种操作&#xff0c;但必须注…