当前位置: 首页 > news >正文

JS中【setTimeout】使用注意事项总结

在JavaScript中,setTimeout是一个用于延迟执行某个函数的非常常见和有用的函数。使用setTimeout时,有几个重要的方面需要注意:

1. 基本用法

setTimeout的基本语法如下:

setTimeout(function, delay);
  • function:这是你想要延迟执行的函数。
  • delay:延迟的时间,以毫秒为单位(1秒=1000毫秒)。

例如:

setTimeout(() => {console.log('Hello, World!');
}, 2000);

这个例子将在2秒(2000毫秒)后打印“Hello, World!”。

2. 异步特性

setTimeout是一个异步函数。这意味着当你调用setTimeout时,JavaScript不会暂停程序的执行,等待计时器结束。相反,它会继续执行接下来的代码,同时后台计时。当计时器到期时,指定的回调函数会被放入事件队列中,并在主线程空闲时执行。

例如:

console.log('Start');
setTimeout(() => {console.log('Timeout completed');
}, 1000);
console.log('End');

输出将是:

Start
End
Timeout completed

尽管我们设置了setTimeout,但“End”会在“Timeout completed”之前被打印,因为setTimeout不会阻塞后续代码的执行。

3. 作用域和this关键字

在使用setTimeout时,特别需要注意this关键字的作用域问题。在箭头函数中,this会继承自外部函数的作用域,而在普通函数中,this将指向全局对象(在浏览器中为window)。

例如:

function MyObject() {this.name = 'MyObject';setTimeout(function() {console.log(this.name);}, 1000);
}

这里this.name将是undefined,因为setTimeout中的普通函数的this指向的是全局对象。

正确的做法是:

function MyObject() {this.name = 'MyObject';setTimeout(() => {console.log(this.name);}, 1000);
}

在箭头函数中,this指向MyObject实例,所以会正确打印"MyObject"

4. 传递参数

setTimeout可以传递参数给回调函数。传递参数的方式如下:

setTimeout(function, delay, param1, param2, ...);

例如:

setTimeout((name) => {console.log(`Hello, ${name}`);
}, 2000, 'Alice');

这里,在2秒后会打印“Hello, Alice”。

5. 取消定时器

如果需要在setTimeout触发之前取消它,可以使用clearTimeout函数。setTimeout返回一个唯一的定时器ID,通过这个ID可以取消定时器。

例如:

const timeoutId = setTimeout(() => {console.log('This will not be logged');
}, 2000);clearTimeout(timeoutId);

在这个例子中,由于clearTimeout在2秒内被调用,setTimeout的回调函数不会被执行。

6. 精确度问题

尽管setTimeout接受一个具体的延迟时间,但由于JavaScript的单线程和事件循环机制,延迟时间并不总是精确的。尤其在主线程忙碌或系统资源紧张的情况下,定时器可能会被延迟执行。

7. 递归调用与setInterval的区别

有时你可能需要重复执行某个任务。虽然setInterval可以用于这种情况,但setTimeout的递归调用通常是更好的选择,因为它允许你更灵活地控制每次执行之间的间隔时间,特别是在处理异步操作时。

例如:

function repeatTask() {console.log('Task executed');setTimeout(repeatTask, 1000);
}repeatTask();

这个例子中,repeatTask函数会每隔1秒递归调用自己一次。

8. 垃圾回收与内存泄漏

当你设置了一个定时器但没有正确清除它,可能会导致内存泄漏,尤其是在定时器回调中引用了外部变量,阻止这些变量被垃圾回收。确保在不再需要定时器时清除它,尤其是在页面卸载或组件销毁时。

9. setTimeout最小延迟

根据HTML标准,setTimeout的最小延迟是4毫秒,但在实际的浏览器环境中,嵌套计时器的最小延迟可能会增加,尤其是在嵌套setTimeout调用超过一定深度时。

总结

setTimeout是JavaScript中非常强大且常用的工具,但其异步特性、作用域问题以及潜在的性能影响需要开发者在使用时加以注意和正确处理。理解这些细节可以帮助你更有效地控制代码执行的时机,避免常见的错误和陷阱。

相关文章:

JS中【setTimeout】使用注意事项总结

在JavaScript中,setTimeout是一个用于延迟执行某个函数的非常常见和有用的函数。使用setTimeout时,有几个重要的方面需要注意: 1. 基本用法 setTimeout的基本语法如下: setTimeout(function, delay);function:这是你…...

已解决ArkTS开发webview,html页面中的input和按钮等操作均无响应

在使用 ArkTS 开发 HarmonyOS 应用时,如果遇到 WebView 中的 HTML 页面元素(如 input 输入框和 button 按钮)无法响应操作的情况,通常与 WebView 的配置或权限设置有关。以下是常见的原因和解决方法。 1. 启用交互权限 确保你的…...

ChatGPT无法登录,提示我们检测到可疑的登录行为,将阻止进一步的尝试。请与管理员联系

1. 问题描述 之前本来已经连续稳定使用ChatGPT好几个月了,但是今天尝试登录ChatGPT的时候,却提示:我们检测到可疑的登录行为,将阻止进一步的尝试。请与管理员联系。 此外,我还在网上看到了一些相关的消息,…...

【数据结构篇】~复杂度

标题【数据结构篇】~复杂度 前言 C语言已经学完了,不知道大家的基础都打得怎么样了? 无论怎么说大家还是要保持持续学习的状态,来迎接接下来的挑战! 现在进入数据结构的学习了,希望大家还是和之前一样积极学习新知识…...

深入理解Python中的JSON模块:解析与生成JSON数据的实用指南

深入理解Python中的JSON模块:解析与生成JSON数据的实用指南 在现代应用程序开发中,JSON(JavaScript Object Notation)已成为数据交换的标准格式。Python的json模块提供了简单而强大的工具来解析和生成JSON数据。本文将详细介绍如何使用json模块,包括基本概念、解析JSON数…...

机器学习三要素:模型、策略和算法

引言 随着人工智能技术的发展,机器学习已成为数据科学领域的核心组成部分。数据在机器学习方法框架中的流动,会按顺序经历三个过程,分别对应机器学习的三大要素:1. 模型;2. 策略;3. 算法。本文将深入探讨这…...

利用红黑树封装map和set

前言: 我们已经学过了如何去实现一棵完整的红黑树,而我们所知道的map和set容器的底层都是由红黑树实现的,因此我们今天来学习如何用红黑树来实现封装map和set。 本来我们需要两个红黑树去分别封装map和set,但是代码会有重复、冗…...

python pyqt5暂停和恢复功能

在PyQt5中,你可以通过结合按钮和事件处理来实现暂停和恢复功能。以下是一个简单的示例代码,演示了如何在PyQt5应用程序中实现暂停和恢复功能。 import sys from PyQt5.QtWidgets import QApplication, QMainWindow, QPushButton, QVBoxLayout, QWidget,…...

CAN总线详解-理论知识部分

目录 CAN总线简介 CAN总线硬件电路 CAN电平标准 CAN收发器 ​编辑 CAN物理层特性 CAN总线帧格式 数据帧 数据帧格式 数据帧发展历史 遥控帧 错误帧 过载帧 帧间隔 位填充 波形实例 CAN总线接收方数据采样 接收方数据采样遇到的问题 位时序 硬同步 再同步 波…...

【Java数据结构】---List(LinkedList)

乐观学习,乐观生活,才能不断前进啊!!! 我的主页:optimistic_chen 我的专栏:c语言 ,Java 欢迎大家访问~ 创作不易,大佬们点赞鼓励下吧~ 文章目录 前言链表(MyS…...

开发军用LabVIEW程序注意事项

在开发军用LabVIEW程序时,开发者需要从多个角度仔细考虑,以满足军方对安全性、可靠性、法规遵从性等方面的严格要求。由于军事系统通常涉及高度敏感的信息和严苛的环境条件,程序的设计必须保证数据的保密性、系统的稳定性以及与各种军事标准的…...

A3VLM: Actionable Articulation-Aware Vision Language Model

发表时间:13 Jun 2024 作者单位:SJTU Motivation:以往的机器人VLM如RT-1[4]、RT-2[3]和ManipLLM[21]都专注于直接学习以机器人为中心的动作。这种方法需要收集大量的机器人交互数据,这在现实世界中非常昂贵。 解决方法&#xf…...

企业高性能web服务器

web服务器介绍 Apache HTTP Server:也称为Apache,是一个开源的HTTP服务器,目前是全球使用最广泛的Web服务器 Nginx:Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器 Microsoft Internet Inform…...

数据库:深入解析SQL分组与聚合——提升数据查询效率的关键技巧

数据库:深入解析SQL分组与聚合——提升数据查询效率的关键技巧 在数据分析和数据库管理中,SQL 的分组与排序操作是不可或缺的工具。本篇博客将深入探讨 GROUP BY 和 ORDER BY 的使用方法,并通过实际案例说明如何通过分组实现数据聚合以及如何…...

【CSS】数字英文css没有转换成...换行点、没有换行、拆分的问题(非常常见的需求)

默认情况下,连续的英文或数字文本不会在空格处换行,这可能导致布局问题。 解决方案 要解决这个问题,可以使用以下几种CSS属性: word-break: 控制单词如何换行。设置为break-all可以让任何字符都能成为换行点。word-wrap: 控制是…...

C++ string模拟实现

一 如何区分自定义类与标准库中的同名类 // string.h #define _CRT_SECURE_NO_WARNINGS 1 #pragma once #include<iostream> using namespace std;namespace bit {class string{} }// Test.cpp include "string.h"int main() {return 0; } 既然要模拟实现str…...

Lora 全文翻译

作者&#xff1a; 地点&#xff1a;hby 来源&#xff1a;https://arxiv.org/pdf/2106.09685 工具&#xff1a;文心 LORA: LOW-RANK ADAPTATION OF LARGE LANGUAGE MODELS 摘要 自然语言处理的一个重要范式包括在通用领域数据上进行大规模预训练&#xff0c;并适应特定任务或…...

结题阶段(2024年8月)

海门区教育科学 “十四五”规划2022年度立项课题 结题鉴定材料 课 题 名 称 高中信息技术项目化教学的研究与应用 课题负责人  郭书艳 所 在 单 位 江苏省包场高级中学 报 送 日 期   2024 年 6 月 20 日…...

贪吃蛇(C语言详解)

贪吃蛇游戏运行画面-CSDN直播 目录 贪吃蛇游戏运行画面-CSDN直播 1. 实验目标 2. Win32 API介绍 2.1 Win32 API 2.2 控制台程序&#xff08;Console&#xff09; 2.3 控制台屏幕上的坐标COORD 2.4 GetStdHandle 2.5 GetConsoleCursorlnfo 2.5.1 CONSOLE_CURSOR_INFO …...

国际以太网专线(IEPL)与国际专线(IPLC)服务

中国联通国际公司产品: 国际以太网专线 (IEPL)/国际专线&#xff08;IPLC&#xff09; 在全球化的今天&#xff0c;企业越来越依赖于高速、稳定且安全的国际网络连接来支持其跨国业务活动。中国联通国际公司作为中国领先的电信运营商之一&#xff0c;在这一领域提供了多种优质…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...