JavaScript定时器详解:setTimeout与setInterval的使用与注意事项

news/2024/11/8 20:56:08 标签: javascript, 开发语言

在JavaScript中,定时器用于在指定的时间间隔后或周期性地执行代码。JavaScript 提供了两种主要的定时器函数:setTimeoutsetInterval。以下是它们的详细解释和实现方式:

1. setTimeout

setTimeout 函数用于在指定的毫秒数后执行一次函数。

语法

javascript">setTimeout(function, delay, [param1, param2, ...])
  • function:要执行的函数。
  • delay:设置延迟执行的时间(以毫秒为单位)。
  • [param1, param2, ...](可选):要传递给函数的参数。

示例

javascript">setTimeout(function() {
    console.log("这条消息将在3秒后显示");
}, 3000);

或者使用箭头函数:

javascript">setTimeout(() => {
    console.log("这条消息将在3秒后显示");
}, 3000);

2. setInterval

setInterval 函数用于每隔指定的毫秒数重复执行函数。

语法

javascript">setInterval(function, delay, [param1, param2, ...])
  • function:要执行的函数。
  • delay:设置重复执行的时间间隔(以毫秒为单位)。
  • [param1, param2, ...](可选):要传递给函数的参数。

示例

javascript">setInterval(function() {
    console.log("这条消息将每隔2秒显示一次");
}, 2000);

或者使用箭头函数:

javascript">setInterval(() => {
    console.log("这条消息将每隔2秒显示一次");
}, 2000);

清除定时器

对于使用 setTimeoutsetInterval 创建的定时器,可以使用 clearTimeoutclearInterval 函数来清除它们,从而停止定时执行。

清除 setTimeout

javascript">let timeoutId = setTimeout(() => {
    console.log("这条消息将不会显示,因为定时器被清除了");
}, 3000);

// 清除定时器
clearTimeout(timeoutId);

清除 setInterval

javascript">let intervalId = setInterval(() => {
    console.log("这条消息将只显示一次,因为定时器被清除了");
}, 1000);

// 在1秒后清除定时器
setTimeout(() => {
    clearInterval(intervalId);
}, 1000);

注意事项

  1. 时间精度setTimeoutsetInterval 的时间间隔并不总是精确的,因为它们受到JavaScript事件循环和浏览器实现的影响。
  2. 最小延迟:浏览器通常有一个最小的定时器延迟(通常为4毫秒),因此设置的时间间隔小于这个值将会被提升到最小延迟。
  3. 内存管理:确保在不需要时清除定时器,以避免内存泄漏和不必要的资源消耗。
  4. 嵌套使用:在定时器的回调函数中再次设置定时器时要小心,这可能会导致难以调试和维护的代码。
  5. 异步性setTimeoutsetInterval 的回调函数是在异步队列中执行的,这意味着它们不会阻塞其他代码的执行。

http://www.niftyadmin.cn/n/5744421.html

相关文章

YoloV10改进策略:上采样改进|CARAFE,轻量级上采样|即插即用|附改进方法+代码

论文介绍 CARAFE模块概述:本文介绍了一种名为CARAFE(Content-Aware ReAssembly of FEatures)的模块,它是一种用于特征上采样的新方法。应用场景:CARAFE模块旨在改进图像处理和计算机视觉任务中的上采样过程,特别适用于目标检测、实例分割、语义分割和图像修复等任务。目标…

ORACLE的字符集

我们在ORACLE数据库中常见的两种字符集:AL32UTF8/ZHS16GBK 什么是字符集: 在计算机语言中每个国家对于自己国家语言的二进制代码设计是不一样的,例如: zhs16gbk 简体中文字符集 :中 01010 国 01100 0101001100 ut…

pnpm管理多工作区依赖

pnpm是一个支持多包仓库的一个包管理工具,那么怎么可以在项目根目录下执行pnpm install的时候,也能同步让所有的工作区都能够通安装依赖呢? 方式一,在执行pnpm install指令的时候,添加recursive参数: pnpm install --recursive 方式二,在项目的根目录下通过pnpm的配置文件p…

VBA经典应用69例应用7:从字符串中删除特定字符

《VBA经典应用69例》(版权10178981),是我推出的第九套教程,教程是专门针对初级、中级学员在学习VBA过程中可能遇到的案例展开,这套教程案例众多,紧贴“实战”,并做“战术总结”,以便…

成都睿明智科技有限公司抖音电商服务效果如何?

在这个短视频风起云涌的时代,抖音电商以其独特的魅力,成为了众多商家竞相追逐的新蓝海。而在这片波澜壮阔的商海中,成都睿明智科技有限公司犹如一艘稳健的航船,引领着无数企业驶向成功的彼岸。今天,就让我们一起揭开成…

FTP替代方案:FileLink内外网文件摆渡,助力企业安全高效文件传输

FTP(文件传输协议)一直是企业进行文件传输的标准解决方案。但随着网络安全威胁的不断增加和企业对于文件传输效率和安全性的更高要求,FTP逐渐显得力不从心。那么,如何安全、便捷地传输大文件和敏感数据呢?FileLink作为…

设计模式小结一装饰者模式

先上结论: 这也是一个Android客户端开发中经常使用到的一个设计模式,最典型的就是OkHttp、Retrofit、Glide,Android源代码中你最常见到的Context上下文,也是采用的装饰者模式。 废话不多说,开干 简单总结下装饰者模式的定义: 动态地给一个对象添加一些额外的职责,就…

梧桐数据库与mysql及oracle关于交换服务器编号的SQL写法分析

一、背景说明 移动运营商的数据中心内有大量服务器设备,它们的性能可能受到相邻服务器的影响,需要优化其数据中心内部服务器的布局。 为了找到最优的布局方案,需要评估不同布局对整体系统性能的影响。一种简单的测试方法是模拟交换服务器的…