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

深入浅出JS定时器:从setTimeout到setInterval

前言

当谈到 JavaScript 编程语言最基本的概念时,定时器就是一个必须掌握的知识点。在编写网站时,你经常会遇到需要在一定时间间隔内执行一些代码的情况。这时候,JavaScript 定时器就可以派上用场了。


什么是定时器?

JS 定时器是一种非常常见的 JavaScript 编程方法,用于周期性地执行指定的代码片段。JS 定时器可以用来实现许多非常实用的效果,例如周期性地更新页面内容、动态地加载数据、实现动画效果等等。

JavaScript 中,有两种主要的定时器方法: setTimeout()setInterval() 。这两个方法都可以用来周期性地执行指定的代码片段,但它们之间有一些关键的区别。


setTimeout() 创建

setTimeout() 方法也可以周期性地执行指定的代码片段,但它只会执行一次,然后等待指定的时间后再次执行。简单来说就是指定时间后执行一段代码(延迟执行)。

setTimeout() 中共有 4 个参数,这里只使用两个参数,第一个参数是一个箭头函数,第二个参数表示在多少秒后执行这个箭头函数。

let timer = setTimeout(() => {console.log("我将在两秒后输出!");
}, 2 * 1000);

clearTimeout() 清除

clearTimeout() 方法用于取消一个定时任务,前提是这个定时任务还没被触发。

let timer = setTimeout(() => {console.log("我将在两秒后输出!");
}, 2 * 1000);
clearTimeout(timer); //定时任务取消,两秒后将不会有任何输出

setInterval() 创建

setInterval() 方法允许我们周期性地执行指定的代码片段,而这个代码片段会一直执行下去。简单来说就是每隔一段时间执行一段代码(间隔执行)。

setInterval() 方法的参数用法与 setTimeout() 一致,区别在于,这个定时器会一直循环执行。

let timer = setInterval(() => {console.log("每隔一秒我将输出一次")
}, 1000)

控制台打印

在这里插入图片描述


setInterval() 清除

clearInterval() 用于取消循环定时任务。

let timer = setInterval(() => {console.log("每隔一秒我将输出一次")
}, 1000)
setTimeout(() => {clearInterval(timer);// 将在3秒时被清除
}, 3000);

控制台打印

在这里插入图片描述


定时器与递归

递归函数是一种特殊的函数,它可以调用自身来完成某些任务。在 JavaScript 中,通过递归函数与定时器可以用来解决许多复杂的问题。

下面是一个最简单的栗子

<template><div>{{num}}</div>
</template><script>
export default {data() {return {num: 0,};},mounted() {this.recursion();},methods: {recursion() {this.num++;setTimeout(() => {this.recursion();}, 1000);},},
};
</script>

实现效果

在这里插入图片描述


深入理解

因为 JavaScript 的执行环境是单线程的,即默认情况下是同步加载的,也就是说 JavaScript 的加载是阻塞的。在同一时间内它只能完成一件事,自上而下执行,下面的代码等待上面的代码解析完成。在这种情况下,后面的代码其实就是被阻塞了。阻塞就意味着等待,等待就意味着用户体验,用户体验一来,那必须得使劲想办法,所以同步和异步出现了。

同步和异步

  • 同步操作:队列执行。
  • 异步操作:并线执行。

异步的任务不具有阻塞效应。同步任务都是在主线程中执行,形成了一个执行栈,直到主线程空闲时,才会去事件队列中查看是否有可执行的异步任务,如果有就推入主进程中。

异步任务在 JavaScript 中是通过回调函数实现异步的,一旦使用了 setTimeout() ,里面的回调函数就是异步代码,但是这里面的代码不会立马执行,而是要等待主队列为空,并达到定的延时时间才会执行。

运行机制

setTimeout()setInterval() 的运行机制是,将指定的代码移出本次执行,等到下一轮事件循环时,再检查是否到了指定时间。如果到了,就执行对应的代码;如果不到,就等到再下一轮事件循环时重新判断。

这意味着,setTimeout()setInterval() 指定的代码,必须等到本轮事件循环的所有同步任务都执行完,再等到本轮事件循环的“任务队列”的所有任务执行完,才会开始执行(宏任务)。由于前面的任务到底需要多少时间执行完,是不确定的,所以没有办法保证在时间内执行。

setTimeout(function () {console.log("异步任务执行");
}, 0);
function a(x) {console.log("a() 开始运行");b(x);console.log("a() 结束运行");
}
function b(y) {console.log("b() 开始运行");console.log(y);console.log("b() 结束运行");
}
console.log("同步任务开始");
a("hello world");
console.log("同步任务结束");

控制台打印结果

在这里插入图片描述


相关文章:

深入浅出JS定时器:从setTimeout到setInterval

前言 当谈到 JavaScript 编程语言最基本的概念时&#xff0c;定时器就是一个必须掌握的知识点。在编写网站时&#xff0c;你经常会遇到需要在一定时间间隔内执行一些代码的情况。这时候&#xff0c;JavaScript 定时器就可以派上用场了。 什么是定时器&#xff1f; JS 定时器是…...

CountDownLatch、CyclicBarrier、Semaphore 的原理以及实例总结

文章目录 CountDownLatch、CyclicBarrier、Semaphore 的原理以及实例总结一、CountDownLatch二、CyclicBarrier三、Semaphore总结 CountDownLatch、CyclicBarrier、Semaphore 的原理以及实例总结 在Java多线程编程中&#xff0c;有三种常见的同步工具类&#xff1a;CountDownL…...

企业电子招投标系统源码之了解电子招标投标全流程

随着各级政府部门的大力推进&#xff0c;以及国内互联网的建设&#xff0c;电子招投标已经逐渐成为国内主流的招标投标方式&#xff0c;但是依然有很多人对电子招投标的流程不够了解&#xff0c;在具体操作上存在困难。虽然各个交易平台的招标投标在线操作会略有不同&#xff0…...

SpringCloud之Gateway组件简介

网关的理解 网关类似于海关或者大门&#xff0c;出入都需要经过这个网关。别人不经过这个网关&#xff0c;永远也看不到里面的东西。可以在网关进行条件过滤&#xff0c;比如大门只有对应的钥匙才能入内。网关和大门一样&#xff0c;永远暴露在最外面 不使用网关 前端需要记住每…...

GoNote第三章 主流框架加对比

GoNote第三章 主流框架加对比 Golang主流框架介绍 自从面市以来&#xff0c;Golang成为了程序员在编写API和开发Web服务时的首选之一。近90%的受访者表示会在自己下一组项目中持续使用Golang。与我们熟悉的C和C类似&#xff0c;Go语言也是现有Golang的“灵魂”。而Golang则是…...

Quartz框架详解分析

文章目录 1 Quartz框架1.1 入门demo1.2 Job 讲解1.2.1 Job简介1.2.2 Job 并发1.2.3 Job 异常1.2.4 Job 中断 1.3 Trigger 触发器1.3.1 SimpleTrigger1.3.2 CornTrigger 1.4 Listener监听器1.5 Jdbc store1.5.1 简介1.5.2 添加pom依赖1.5.3 建表SQL1.5.4 配置文件quartz.propert…...

Nginx专题-基于多网卡的主机配置

文章目录 Nginx 基于多网卡的主机实现一、虚拟机前置环境准备ifcfg-ens32配置文件的内容参考ifcfg-ens33配置文件的内容 二、案例演示修改nginx.conf配置文件解决中文乱码 Nginx 基于多网卡的主机实现 一、虚拟机前置环境准备 点击虚拟机右下角的 红色标框按钮&#xff0c;然后…...

4.2和4.3、MAC地址、IP地址、端口

计算机网络等相关知识可以去小林coding进行巩固&#xff08;点击前往&#xff09; 4.2和4.3、MAC地址、IP地址、端口 1.MAC地址的简介2.IP地址①IP地址简介②IP地址编址方式③A类IP地址④B类IP地址⑤C类IP地址⑥D类IP地址⑧子网掩码 3.端口①简介②端口类型 1.MAC地址的简介 …...

放弃 console.log 吧!用 Debugger 你能读懂各种源码

很多同学不知道为什么要用 debugger 来调试&#xff0c;console.log 不行么&#xff1f; 还有&#xff0c;会用 debugger 了&#xff0c;还是有很多代码看不懂&#xff0c;如何调试复杂源码呢&#xff1f; 这篇文章就来讲一下为什么要用这些调试工具&#xff1a; console.lo…...

epoll机制解析

一、epoll实现原理 1、实现原理 epoll通过3个方法来实现对句柄的监控操作&#xff0c;要深刻理解epoll&#xff0c;首先得了解epoll的三大关键要素&#xff1a;mmap、红黑树、链表。下面是epoll的框架图&#xff0c;如下&#xff1a; mmap epoll是通过内核与用户空间mmap同一块…...

基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目

今天给小伙伴们分享一个基于 SpringBoot Vue 实现的可视化拖拽编辑的大屏项目&#xff1b; 一、简介 这个是一个开源的一个BI平台&#xff0c;酷炫大屏展示&#xff0c;能随时随地掌控业务动态&#xff0c;让每个决策都有数据支撑。 多数据源支持&#xff0c;内置mysql、el…...

我们为什么要写作?

为什么要写书是一个很难回答的问题&#xff0c;因为从不同的角度&#xff0c;会有不同的答案。 最近ChatGPT很火&#xff01;诸事不决&#xff0c;先问问ChatGPT&#xff0c;看看它是怎么回答的。 ChatGPT给出的答案还是比较全&#xff0c;虽然没有“一本正经的胡说八道”&…...

设计模式:创建者模式 - 建造者模式

文章目录 1.概述2.结构3.实例4.优缺点5.使用场景6.模式扩展 1.概述 将一个复杂对象的构建与表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 分离了部件的构造(由Builder来负责)和装配(由Director负责)。 从而可以构造出复杂的对象。这个模式适用于&#xff1a;某…...

String a = new String(“abc“); 创建了几个对象?String a = “abc“; 呢?

String a new String(“abc”); 创建了几个对象&#xff1f;String a “abc”; 呢&#xff1f; 答案&#xff1a;String a new String(“abc”); 创建了1个或2个对象&#xff1b;String a “abc”; 创建了0个或1个都对象 String a new String(“abc”); 创建过程 首先在…...

keepalived+nginx安装

欢迎使用ShowDoc&#xff01; 1、安装基础包&#xff1a; yum -y install libnl libnl-devel 2、上传包&#xff1a; tar -zxvf keepalived-2.0.20.tar.gz -C /data/imas/base_soft mkdir -p /data/imas/base_soft/keepalived cd /data/imas/base_soft/keepalived-2.0.20 .…...

硬盘格式化工具,强烈推荐这个!

案例&#xff1a;硬盘格式化工具推荐 【我的电脑已经用了好几年了&#xff0c;硬盘存储容量严重不够了&#xff0c;最近想把它格式化&#xff0c;但却不知道怎么操作&#xff0c;大家有什么比较好的硬盘格式化工具可以推荐吗&#xff1f;】 硬盘作为存储设备&#xff0c;我们…...

Python的异常捕获和处理

程序在运行过程当中&#xff0c;不可避免的会出现一些错误&#xff0c;比如&#xff1a;使用了没有赋值过的变量&#xff0c;使用了不存在的索引&#xff0c;一个数字除以0 …… 这些错误在程序中&#xff0c;我们称其为异常。 程序运行过程中&#xff0c;一旦出现异常将会导致…...

oracle学习之rownum和rowid

rownum先百度一波https://www.cnblogs.com/xfeiyun/p/16355165.html rownum是oracle特有的一个关键字。 对于基表&#xff0c;在insert记录时&#xff0c;oracle就按照insert的顺序&#xff0c;将rownum分配给每一行记录&#xff0c;因此在select一个基表的时候&#xff0c;r…...

为什么说过早优化是万恶之源?

Donald Knuth&#xff08;高德纳&#xff09;是一位计算机科学界的著名学者和计算机程序设计的先驱之一。他被誉为计算机科学的“圣经”《计算机程序设计艺术》的作者&#xff0c;提出了著名的“大O符号”来描述算法的时间复杂度和空间复杂度&#xff0c;开发了TeX系统用于排版…...

如何用 ModelScope 实现 “AI 换脸” 视频

前言 当下&#xff0c;视频内容火爆&#xff0c;带有争议性或反差大的换脸视频总能吸引人视线。虽然 AI 换脸在市面上已经流行了许久&#xff0c;相关制作工具或移动应用也是数不胜数。但是多数制作工具多数情况下不是会员就是收费&#xff0c;而且替换模板有限。以下在实战的角…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

鸿蒙HarmonyOS 5军旗小游戏实现指南

1. 项目概述 本军旗小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;采用DevEco Studio实现&#xff0c;包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...