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]都专注于直接学习以机器人为中心的动作。这种方法需要收集大量的机器人交互数据,这在现实世界中非常昂贵。 解决方法…...
企业高性能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 全文翻译
作者: 地点:hby 来源:https://arxiv.org/pdf/2106.09685 工具:文心 LORA: LOW-RANK ADAPTATION OF LARGE LANGUAGE MODELS 摘要 自然语言处理的一个重要范式包括在通用领域数据上进行大规模预训练,并适应特定任务或…...
结题阶段(2024年8月)
海门区教育科学 “十四五”规划2022年度立项课题 结题鉴定材料 课 题 名 称 高中信息技术项目化教学的研究与应用 课题负责人 郭书艳 所 在 单 位 江苏省包场高级中学 报 送 日 期 2024 年 6 月 20 日…...
贪吃蛇(C语言详解)
贪吃蛇游戏运行画面-CSDN直播 目录 贪吃蛇游戏运行画面-CSDN直播 1. 实验目标 2. Win32 API介绍 2.1 Win32 API 2.2 控制台程序(Console) 2.3 控制台屏幕上的坐标COORD 2.4 GetStdHandle 2.5 GetConsoleCursorlnfo 2.5.1 CONSOLE_CURSOR_INFO …...
国际以太网专线(IEPL)与国际专线(IPLC)服务
中国联通国际公司产品: 国际以太网专线 (IEPL)/国际专线(IPLC) 在全球化的今天,企业越来越依赖于高速、稳定且安全的国际网络连接来支持其跨国业务活动。中国联通国际公司作为中国领先的电信运营商之一,在这一领域提供了多种优质…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学(Elliptic Curve Cryptography)是基于椭圆曲线数学理论的公钥密码系统,由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA,ECC在相同安全强度下密钥更短(256位ECC ≈ 3072位RSA…...
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以? 在 Golang 的面试中,map 类型的使用是一个常见的考点,其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中,Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染(即CPU被阻塞),这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案: 对惹,这里有一个游戏开发交流小组&…...
day52 ResNet18 CBAM
在深度学习的旅程中,我们不断探索如何提升模型的性能。今天,我将分享我在 ResNet18 模型中插入 CBAM(Convolutional Block Attention Module)模块,并采用分阶段微调策略的实践过程。通过这个过程,我不仅提升…...
鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题:docker pull 失败 网络不同,需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
uniapp中使用aixos 报错
问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建
华为云FlexusDeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色,华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型,能助力我们轻松驾驭 DeepSeek-V3/R1,本文中将分享如何…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
