“前端开发中的三种定时任务及其应用“
前端定时任务是指在一定时间间隔内,自动执行指定的操作或函数。在前端开发中,定时任务被广泛应用于诸如数据更新、定时提醒、定时刷新页面等方面。在本文中,我们将介绍前端中常见的三种定时任务,分别是 setTimeout、setInterval 和 requestAnimationFrame。
setTimeout
setTimeout 是前端最常见的定时任务方式之一。它是一个全局函数,用于在指定时间间隔之后执行指定的函数。setTimeout 函数的语法如下:
javascript
setTimeout(function, delay, arg1, arg2, ...)
其中,function 参数是要执行的函数,delay 参数是延迟的时间,单位为毫秒。arg1、arg2 等参数是要传递给函数的参数,可以省略。
例如,下面的代码会在延迟 1 秒后弹出 "Hello World!":
javascript
setTimeout(function() {alert("Hello World!");
}, 1000);
setTimeout 函数只会执行一次,如果需要多次执行,需要在函数内部再次调用 setTimeout 函数。
setTimeout 的缺点是,由于 JavaScript 是单线程执行的,如果某个函数执行时间较长,会导致整个页面卡顿。因此,setTimeout 不适合执行较为复杂的任务。
setInterval
setInterval 是另一种常见的前端定时任务方式,用于每隔一定时间执行指定的函数。setInterval 函数的语法如下:
javascript
setInterval(function, delay, arg1, arg2, ...)
其中,function 参数是要执行的函数,delay 参数是每次执行之间的时间间隔,单位为毫秒。arg1、arg2 等参数是要传递给函数的参数,可以省略。
例如,下面的代码会每隔 1 秒弹出 "Hello World!":
javascript
setInterval(function() {alert("Hello World!");
}, 1000);
setInterval 函数会不断重复执行,直到 clearInterval 函数被调用或页面关闭。与 setTimeout 不同的是,setInterval 函数的执行不会受到前一个函数的执行时间影响,因此适合执行较为复杂的任务。
requestAnimationFrame
requestAnimationFrame 是前端定时任务的一种新方式,用于执行一些需要高性能渲染的任务。与 setTimeout 和 setInterval 不同,requestAnimationFrame 会在下一次浏览器重绘之前执行指定的函数。这样可以避免由于频繁的重绘导致的性能问题。
requestAnimationFrame 函数的语法如下:
javascript
window.requestAnimationFrame(callback);
其中,callback 参数是要执行的函数。
例如,下面的代码会在下一次浏览器重绘之前执行指定的函数:
javascript
function animate() {// 执行动画效果window.requestAnimationFrame(animate);
}
animate();
requestAnimationFrame 函数在性能上比 setTimeout 和 setInterval 更优,因为它会根据浏览器的帧率进行调节,避免了不必要的浪费。
综上所述,前端常见的三种定时任务分别是 setTimeout、setInterval 和 requestAnimationFrame。其中,setTimeout 和 setInterval 适用于一些简单的定时任务,而 requestAnimationFrame 则适用于一些需要高性能渲染的任务。在实际开发中,应根据具体的需求选择不同的定时任务方式,并注意避免一些常见的问题,比如定时任务过多导致的性能问题。
同时,需要注意的是,由于 JavaScript 是单线程执行的,如果某个定时任务执行时间过长,会导致整个页面卡顿。因此,在编写定时任务的时候,应该尽量避免阻塞主线程,可以通过将任务放在 Web Worker 中执行、使用异步操作等方式来提高执行效率。
在实际应用中,我们还可以通过使用第三方的定时任务库来简化开发,比如 node-cron、agenda 等。这些库提供了更加灵活和高级的定时任务管理方式,可以帮助开发者更加方便地管理定时任务,并提高代码的可维护性和可读性。
总之,定时任务是前端开发中非常常见的一种场景,开发者应该掌握各种定时任务的使用方式,并注意避免一些常见的问题,从而提高代码的质量和效率。
关注我,持续分享优质好文!!!
相关文章:
“前端开发中的三种定时任务及其应用“
前端定时任务是指在一定时间间隔内,自动执行指定的操作或函数。在前端开发中,定时任务被广泛应用于诸如数据更新、定时提醒、定时刷新页面等方面。在本文中,我们将介绍前端中常见的三种定时任务,分别是 setTimeout、setInterval 和…...
华为OD机试题 - 猜字谜(JavaScript)| 机考必刷
更多题库,搜索引擎搜 梦想橡皮擦华为OD 👑👑👑 更多华为OD题库,搜 梦想橡皮擦 华为OD 👑👑👑 更多华为机考题库,搜 梦想橡皮擦华为OD 👑👑👑 华为OD机试题 最近更新的博客使用说明本篇题解:猜字谜题目输入输出描述备注示例一输入输出示例二输入输出思路C…...

python@pyside样式化
文章目录refWidget类创建样式化文件qss引用样式并启动应用ref Styling the Widgets Application - Qt for PythonQt Style Sheets Reference | Qt Widgets 5.15.12 Widget类创建 创建一个简单界面(菜单主要内容)它们是水平布局 主要内容包括一段文本和一个按钮,它们是垂直布…...
C++经典15道面试题目(文末含大题)
今天给大家找了几个C面试里很有可能被问的哦,赶紧收藏下来去背!!! 目录 1)C中有malloc/free,为什么还需要new/delete? 2)C中explicit关键字的作用? 3)C中static关键字的作用&a…...
自动计算30天内的股价最高价源代码
我可以回答这个问题。您可以使用以下代码来计算30天内股价的最高价: 复制 import pandas as pd import yfinance as yf # 设置股票代码和日期范围 symbol "AAPL" start_date "2021-01-01" end_date "2021-06-30" # 获取股票…...

国外SEO升级攻略!一看就懂!
SEO是搜索引擎优化的缩写,它是指通过优化网站内容和结构,提升网站在搜索引擎中的排名,从而获得更多的有价值的流量。 而关键词研究和选择是SEO优化中最基础也是最关键的环节,它决定了网站将面向哪些用户、哪些关键词和词组将被优…...

设计模式—适配器模式
适配器模式(Adapter Pattern)是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式,它结合了两个独立接口的功能。这种模式涉及到一个单一的类,该类负责加入独立的或不兼容的接口功能。举个真实的例子,…...

OpenAI-J 如何进行测试
当你检出 OpenAI-J 项目以后,你可以对 OpenAI-J 进行测试。在测试之前你首先需要获得 OpenAI 的 API Key。OpenAI 的 Key通常是以 sk 开头的字符串。最简单粗暴的办法就是把获得的 key 替换掉上面的字符串,然后进行测试就可以了。运行 Unit 测试在我们的…...

课设-机器学习课设-实现新闻分类
✅作者简介:CSDN内容合伙人、信息安全专业在校大学生🏆 🔥系列专栏 :课设-机器学习 📃新人博主 :欢迎点赞收藏关注,会回访! 💬舞台再大,你不上台,…...

关于异常控制流和系统级 I/O:进程
💭 写在前面:本文将学习《深入理解计算机系统》的第六章 - 关于异常控制流和系统级 I/O 的 进程部分。CSAPP 是计算机科学经典教材《Computer Systems: A Programmers Perspective》的缩写,该教材由Randal E. Bryant和David R. OHallaron 合著…...
Unet 基于TCGA颅脑肿瘤MRI分割(交叉熵损失+多通道输出)
目录 1. 介绍 2. Unet 2.1 unet 代码 2.2 测试网络 3. dataset 数据加载 4. train 训练...
货物摆放(蓝桥杯C/C++省赛)
题目描述 小蓝有一个超大的仓库,可以摆放很多货物。 现在,小蓝有 nn 箱货物要摆放在仓库,每箱货物都是规则的正方体。小蓝规定了长、宽、高三个互相垂直的方向,每箱货物的边都必须严格平行于长、宽、高。 小蓝希望所有的货物最…...
mysql 索引原理
文章目录 1、索引的本质2、索引的分类2.1、Hash 索引2.2、二叉树2.4、B树(二三树)2.5、B+树3、主键目录4、索引页5、索引页的分层6、非主键索引7.回表1、索引的本质 索引的本质是一种排好序的数据结构。 2、索引的分类 在数据库中,索引是分很多种类的(千万不要狭隘的认为…...

【Linux】文件系统详解
😊😊作者简介😊😊 : 大家好,我是南瓜籽,一个在校大二学生,我将会持续分享C/C相关知识。 🎉🎉个人主页🎉🎉 : 南瓜籽的主页…...

3句代码,实现自动备份与版本管理
前言:服务器开发程序、测试版本等越来越多,需要及时做好数据的版本管理和备份,作为21世界的青年,希望这些事情都是可以自动完成,不止做了数据备份,更重要的是做好了版本管理,让我们可以追溯我们…...
华为OD机试题 - 删除指定目录(JavaScript)| 机考必刷
更多题库,搜索引擎搜 梦想橡皮擦华为OD 👑👑👑 更多华为OD题库,搜 梦想橡皮擦 华为OD 👑👑👑 更多华为机考题库,搜 梦想橡皮擦华为OD 👑👑👑 华为OD机试题 最近更新的博客使用说明本篇题解:删除指定目录题目输入输出示例一输入输出说明Code解题思路华为O…...

3分钟上手,2小时起飞!教你玩转OceanBase Cloud
盼星星盼月亮!掰掰手指,距离 3 月 25 日还有 123456......两周啦🤩~ 除了白天的主论坛和分论坛的精彩分享外,晚间的 3 场 Hands-on Workshop 动手实验营也深得大家期待,从部署到迁移,从 On-Premise 到 Clou…...

location对象详解
location对象 location是最有用的BOM对象之一,它提供了与当前窗口中加载的文档信息,还提供了一些导航功能。既是window对象,也是document对象的属性,即window.location和document.location引用的是同一个对象。它主要的功能有以下…...

【强度混合和波段自适应细节融合:PAN-Sharpening】
Intensity mixture and band-adaptive detail fusion for pansharpening (用于全色锐化的强度混合和波段自适应细节融合) 全色锐化的目的是通过高分辨率单通道全色(PAN)图像锐化低分辨率多光谱(MS)图像&a…...
【随笔】《挥手自兹去》
挥手自兹去那样美的一束光照在我身上,挥手自兹去,下次又要何时再见?那日闲来无事,到小区前的公园里散步。绿草如因,野花点点,阳光照的人很舒服。一片空地上,我看见了一个女孩,她那么…...

利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户,但你不希望用 root 权限运行 ns-3(这是对的,ns3 工具会拒绝 root),你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案:创建非 roo…...
根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:
根据万维钢精英日课6的内容,使用AI(2025)可以参考以下方法: 四个洞见 模型已经比人聪明:以ChatGPT o3为代表的AI非常强大,能运用高级理论解释道理、引用最新学术论文,生成对顶尖科学家都有用的…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral(热门工具 Ruff 的开发者)推出的下一代高性能 Python 包管理器和构建工具,用 Rust 编写。它旨在解决传统工具(如 pip、virtualenv、pip-tools)的性能瓶颈,同时…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中,损失函数的选择对模型性能具有决定性影响。均方误差(MSE)作为经典的损失函数,在处理干净数据时表现优异,但在面对包含异常值的噪声数据时,其对大误差的二次惩罚机制往往导致模型参数…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而,传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案,能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...

莫兰迪高级灰总结计划简约商务通用PPT模版
莫兰迪高级灰总结计划简约商务通用PPT模版,莫兰迪调色板清新简约工作汇报PPT模版,莫兰迪时尚风极简设计PPT模版,大学生毕业论文答辩PPT模版,莫兰迪配色总结计划简约商务通用PPT模版,莫兰迪商务汇报PPT模版,…...

C++ 设计模式 《小明的奶茶加料风波》
👨🎓 模式名称:装饰器模式(Decorator Pattern) 👦 小明最近上线了校园奶茶配送功能,业务火爆,大家都在加料: 有的同学要加波霸 🟤,有的要加椰果…...
4. TypeScript 类型推断与类型组合
一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式,自动确定它们的类型。 这一特性减少了显式类型注解的需要,在保持类型安全的同时简化了代码。通过分析上下文和初始值,TypeSc…...
Vite中定义@软链接
在webpack中可以直接通过符号表示src路径,但是vite中默认不可以。 如何实现: vite中提供了resolve.alias:通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...