性能优化---节流与防抖

news/2025/1/16 10:02:12/

1、什么是节流和防抖

        防抖是指在事件被触发 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时。这可以使用在一些点击请求的事件上,避免因为用户的多次点击向后端发送多次请求。

        节流是指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。节流可以使用在 scroll 函数的事件监听上,通过事件节流来降低事件调用的频率。

2、防抖的应用场景

        按钮提交场景;

        服务端验证场景。

3、节流的应用场景

        拖拽场景;

        缩放场景;

        动画场景。

4、防抖的实现

function debounce(fn, wait) {var timer = null;return function() {var context = this,args = [...arguments];// 如果此时存在定时器的话,则取消之前的定时器重新记时if (timer) {clearTimeout(timer);timer = null;}// 设置定时器,使事件间隔指定事件后执行timer = setTimeout(() => {fn.apply(context, args);}, wait);};
}

5、节流的实现

// 时间戳版
function throttle(fn, delay) {var preTime = Date.now();return function() {var context = this,args = [...arguments],nowTime = Date.now();// 如果两次时间间隔超过了指定时间,则执行函数。if (nowTime - preTime >= delay) {preTime = Date.now();return fn.apply(context, args);}};
}// 定时器版
function throttle (fun, wait){let timeout = nullreturn function(){let context = thislet args = [...arguments]if(!timeout){timeout = setTimeout(() => {fun.apply(context, args)timeout = null }, wait)}}
}


http://www.ppmy.cn/news/1428921.html

相关文章

OPC-UA是这样在食品和饮料中应用的

什么是 OPC-UA OPC Unified Architecture,即 OPC-UA,是一种基于 TCP/IP 的协议,用于自动化工程师实时、高可靠性、高效性地在控制系统级别共享数据。 OPC-UA 的特点 安全通信: OPC-UA 使用先进的加密方法和严格的访问控制,确保数…

KMP算法难点解析

当我们实现在文本中寻找是否有特定的文本出现,我们需要实现文本匹配算法。 比如在文本:aabaabaaf 中,我们要查询是否有文本:aabaaf出现。 关于暴力求解,我就不再过多赘述,直接进入正题。 kmp算法的关键—…

【Android AMS】startActivity流程分析

文章目录 AMSActivityStackstartActivity流程startActivityMayWaitstartActivityUncheckedLocked startActivityLocked(ActivityRecord r, boolean newTask, boolean doResume, boolean keepCurTransition)resumeTopActivityLocked 参考 AMS是个用于管理Activity和其它组件运行…

【网站项目】校园商铺系统小程序

🙊作者简介:拥有多年开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件,帮助大学选题。赠送开题报告模板&#xff…

[linux]进程控制——进程终止

一、main函数的返回值 我们在编写C语言的程序时,通常会这样写: int main() {return 0; } 那么我们为什么要返回(return)0 呢? 其实,main函数也是一个函数,它也会被调用,所以谁调…

Qwen1.5大语言模型微调实践

在人工智能领域,大语言模型(Large Language Model,LLM)的兴起和广泛应用,为自然语言处理(NLP)带来了前所未有的变革。Qwen1.5大语言模型作为其中的佼佼者,不仅拥有强大的语言生成和理…

第十四届蓝桥杯填空题(日期统计)

问题描述 小蓝现在有一个长度为 100 的数组,数组中的每个元素的值都在 0 到 9 的范围之内。数组中的元素从左至右如下所示: 5 6 8 6 9 1 6 1 2 4 9 1 9 8 2 3 6 4 7 7 5 9 5 0 3 8 7 5 8 1 5 8 6 1 8 3 0 3 7 9 2 7 0 5 8 8 5 7 0 9 9 1 9 4 4 6 8 6 …

rCore-Tutorial-Book第二课(移除Rust std标准库依赖)

本节任务: 移除掉代码对 Rust std标准库的依赖,并将自己的程序改造成为能被编译到 RV64GC 裸机平台 文章目录 1. 移除 println! 宏1.1 rust代码编译到指定目标平台1.2 禁用 rust-std 标准库1.3 提供panic_handler 功能 2. 移除main 函数3. 分析被移除标准库的程序3.…