JavaScript setTimeout和setInterval的用法与区别详解

目录

I. 总述

II. setTimeout()函数

III. setInterval()函数

IV. 新年倒计时案例


Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,下面这篇文章主要给大家介绍了关于JavaScript setTimeout和setInterval的用法与区别,如果大家有需要可以参考下。

I. 总述

首先,setTimeout()和setInterval()函数是JavaScript中两个很重要的关于"时间的函数",因此,我们在学习JavaScript的过程中,一定要对这两个函数有一个深入的学习,它们两个函数也是经常被使用的!

 其中,如果分别用一句话来概括这两个函数,那么应该是这样的:

setTimeout(): 该函数能够按照设定的时间值延迟执行其中的事件。

setInterval(): 该函数能够按照设定的时间值作为间隔,周期性的执行其中的时间。

当然了,只是简述,细节方面,我们在下面的部分给大家做讲解。

II. setTimeout()函数

首先是我们的setTimeout()函数,它的格式是怎么样的呢:

setTimeout(function,times, param1, param2, …);

setTimeout 是一个定时器函数,它允许我们在指定的时间后执行一次函数。其中,function 是我们要执行的函数,times 是延迟的时间(以毫秒为单位),param1, param2, … 等是传递给函数的参数(可选)。例如我们看这段简单的代码:

setTimeout(function(){alert("hello,setTimeout()");}, 1000);

运行之后,它会在1s的延迟之后,弹出一个弹框,其中,1000的单位是毫秒!

学到这里,大家觉得很简单,对吗?好的,那我给一段代码,大家猜一下它会输出什么

for (var i = 1; i <= 5; i++) {setTimeout(function () {alert(i)}, 1000)
}

哎,有人要说了,简单啊,这不是输出:1 2 3 4 5 吗?

然而实际上,它输出了6 6 6 6 6,所以这是为什么呢?因为setTimeout()是一个异步执行函数,说人话就是,它里面的函数体,并不会在每一次执行的时候立刻运行,而是会丢进执行队列中,等待"主线任务"全部完成,才会执行它

于是在5次for循环后,i的值是5,传进去,弹出了6个6。

那么有没有解法呢?我给大家两种解法:

1️⃣ 使用关键字let:

for (let i = 1; i <= 5; i++) {setTimeout(function () { alert(i);}, 1000)
}

执行结果:

那为啥使用let就可以了呢:

其实使用let之后,也没有改变执行机制仍然是最后执行的alert()但是let可以在每一次把更新的变量i传进函数体内,也就是每一次的i加1之后,会把这个新值放进队列中对应的函数内,于是就解决了这个问题。

2️⃣ 定义一个外部变量:

我们在外部定义一个变量,这样这个变量每一次会被放入队列中,依旧不改变本身的执行机制:

var j = 1;
for (i = 1; i <= 5; i++) {setTimeout(function () {alert(j)j++;}, 1000);
}

第二种做法,更容易被别人看懂,也更适合做项目时实际使用。

:setTimeout 返回一个唯一的标识符,我们可以使用 clearTimeout 函数来取消这个定时器。代码如下:

// 延迟 1 秒后输出 "Hello, world!"
const timerId = setTimeout(() => {console.log("Hello, world!");
}, 1000);
// 取消定时器
clearTimeout(timerId);

这段代码定义了一个 setTimeout 定时器,它会在 1 秒后执行一个函数,输出字符串 “Hello,world!”。同时,它会将返回的计时器 ID 存储在变量 timerId 中。 接下来的一行代码调用了 clearTimeout 函数,并传timerId。这个函数会取消之前设置的定时器,从而避免了执行函数的操作。因此,这段代码最终不会输出任何内容。

III. setInterval()函数

setInterval() 也是JavaScript的一个定时器函数,用于设置周期性的定时任务,相较于 setTimeout函数,它就没那么复杂了,但是它的功能确实很强大的,我们先看看它的使用语法

setInterval(function,times,param1, param2, …);

同setTimeout()格式一致,其中,function参数表示要执行的函数,delay参数表示定时器的时间间隔(以毫秒为单位),param1, param2, …表示传递给函数的参数(可选)。setInterval()函数可以以设置的times为间隔来循环重复function,我们用一个小例子来测试一下:

setInterval(function(){alert('hello,setInterval()');
}, 1000);

运行之后,每过1秒,就会弹出一个弹窗,显示这段话。

那运行之后,我们想当然会有一个问题,那就是可不可以在某个特定的时机让它不再循环执行?答案是肯定滴,只不过我们需要定义一个setInterval()函数的对象,我们一般取名叫:timer

var i = 5;
var timer = setInterval(function(){  i --;   if(i < 0){   clearInterval(timer);}    alert(i);     }, 1000);

上面的代码中,我们给setInterval创建了一个对象叫timer,在外部我们定义了另一个变量i,之后我们每一次执行Interval内的函数时,就让 i-1 减到0以下,清除定时器

clearInterval(timer对象);

上面这句话是清除定时器的代码,传入一个setInterval()函数的对象即可。

✔ 小结:setInterval()和setTimeout()的区别

setInterval() 和 setTimeout() 都是 JavaScript 中的定时器函数,但它们有以下几个区别:

1. setInterval() 在延迟指定时间后重复执行指定任务,直到被取消或页面关闭。而 setTimeout() 在延迟指定时间后执行指定任务,只执行一次;

2. setInterval() 的执行间隔时间是固定的,而 setTimeout() 可以动态调整延迟时间;

3. setInterval() 可能会存在累积性误差,因为它的执行时间是相对于上一次任务结束的时间计算的,如果执行的任务耗时超过了指定的时间间隔,就会出现累积性误差。而 setTimeout() 每次执行都是相对于上一次任务开始的时间计算的,不存在累积性误差;

4. setInterval() 可能会对性能产生影响,因为它会不断地重复执行指定任务,占用 CPU 资源。而 setTimeout() 只会在指定时间后执行一次任务,对性能影响较小。

所以,一般情况下,如果我们需要周期性地执行指定任务,就可以使用 setInterval();如果我们只需要在指定时间后执行一次任务,就可以使用 setTimeout()。

✔ 注意事项

使用setInterval()时要注意以下几点:

1. delay参数的最小值是4毫秒,如果设置的值小于4毫秒,则会被强制转换为4毫秒。

2. setInterval()返回一个定时器ID,可以使用clearInterval()函数来取消定时器。

3. 由于JavaScript是单线程的,因此,如果function函数执行的时间过长,可能会影响页面的响应性能。因此,建议在编写function函数时要尽量减少执行时间。

IV. 新年倒计时案例

最后,我们用学习的setTimeout()函数和setInterval()函数联动做一个新年倒计时案例吧:

我们想要这样的效果:

首先,实现在屏幕上展示60秒倒计时;

在倒计时为0后,弹窗展示新年快乐!

有人看了这个说明,觉得那么我们的代码应该是这样的:

var element = document.getElementById("xin-nian")
var clock = 60;
var timer = null;
timer = setInterval(function () {element.innerHTML = "新年倒计时:" + clock + " !";console.log(clock)clock--;if (clock < 0) {clearInterval(timer);alert("新年快乐!");}
}, 1000);

乍一看,好像没问题,但实际运行的时候,由于向html写入内容有一个小延迟,会导致最后倒计时0这个数字没被写进去就会弹窗,因此,我们要在倒计时最后一秒,用setTimeout()做一个小缓冲

if (clock < 0) {clearInterval(timer);setTimeout(function () {alert("新年快乐!") }, 500)};

于是完整的代码应该是这样的:

<!DOCTYPE html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新年倒计时</title><style>body {background-image: url(./1.jpg);}</style>
</head><body><h1 id="xin-nian" style="text-align: center;margin-top: 250px;font-size: 50px;"></h1><script>var element = document.getElementById("xin-nian")var clock = 60; var timer = null; timer = setInterval(function () {element.innerHTML = "新年倒计时:" + clock + " !";console.log(clock)clock--;if (clock < 0) {clearInterval(timer);setTimeout(function () {alert("新年快乐!")}, 500)}}, 1000)</script>
</body></html>

实现的效果如下:

参考资料

setInterval()和setTimeout()的用法 | 定时器 setTimeout、setInterval详解

JS中定时器setTimeout()和setInterval()的用法 | JS的setInterval()与setTimeout()计时器

页面中实现setInterval和setTimeout效果示例详解 | 浅谈对于“不用setInterval,用setTimeout”的理解

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/588955.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

读取某股票的日线数据

只需修改对应股票的ts_code&#xff0c;start_date&#xff0c;end_date即可获取对应股票的全部数据。 import tushare as ts import pandas as pdpd.set_option(expand_frame_repr, False) # 当列太多时不换行 pd.set_option(display.max_rows, 5000) # 最多显示数据的行数…

结构型设计模式—装饰器模式

装饰器模式&#xff1a;不改变原对象的基础上&#xff0c;灵活地给对象添加额外职责。装饰器相比于生成子类更加灵活。即将实现同一接口的父类当做参数传入包装器对象&#xff0c;动态创建出新的对象。 给对象添加新行为最简单直观的办法就是扩展本体对象&#xff0c;通过继承…

编程笔记 html5cssjs 018 HTML颜色

编程笔记 html5&css&js 018 HTML颜色 一、HTML 颜色二、HTML中设置颜色值注意 颜色是视觉中重要因素&#xff0c;尤其是处理人机界面中&#xff0c;更是要处理颜色设置和搭配。在网页中&#xff0c;提供了设置颜色的一些方案&#xff0c;需要我们认真学习和掌握。 一、…

HTML5和JS实现新年礼花效果

HTML5和JS实现新年礼花效果 2023兔年再见&#xff0c;2024龙年来临了&#xff01; 祝愿读者朋友们在2024年里&#xff0c;身体健康&#xff0c;心灵愉悦&#xff0c;梦想成真。 下面是用HTML5和JS实现新年礼花效果&#xff1a; 源码如下&#xff1a; <!DOCTYPE html>…

MySQL数据库学习一

1 什么是数据库的事务&#xff1f; 1.1 事务的典型场景 在项目里面&#xff0c;什么地方会开启事务&#xff0c;或者配置了事务&#xff1f;无论是在方法上加注解&#xff0c;还 是配置切面。 <tx:advice id"txAdvice" transaction-manager"transactionMa…

个人简历范本(精选5篇)

HR浏览一份简历也就25秒左右&#xff0c;如果你连「好简历」都没有&#xff0c;怎么能找到好工作呢&#xff1f; 如果你不懂得如何在简历上展示自己&#xff0c;或者觉得怎么改简历都不出彩&#xff0c;那请你一定仔细读完。 个人求职简历第 1 篇 男 22 本科 AI简历 市场营…

007、控制流

先看下本篇学习内容&#xff1a; 通过条件来执行 或 重复执行某些代码 是大部分编程语言的基础组成部分。在Rust中用来控制程序执行流的结构主要就是 if表达式 与 循环表达式。 1. if表达式 if表达式允许我们根据条件执行不同的代码分支。我们提供一个条件&#xff0c;并且做出…

【NTN 卫星通信】Oneweb星座以及Oneweb与Starlink比较

1 什么是OneWeb OneWeb于2012年以WorldVu的名义成立&#xff0c;于2020年开始构建其星座。然而&#xff0c;对于这家英国公司来说&#xff0c;这是一个艰难的旅程&#xff0c;OneWeb于2020年3月宣布破产&#xff0c;并认为covid-19大流行是一个主要因素。OneWeb星座当时仅完成…

一次降低进程IO延迟的性能优化实践——基于block层bfq调度器

如果有个进程正频繁的读写文件&#xff0c;此时你vim查看一个新文件&#xff0c;将会出现明显卡顿。即便你vim查看的文件只有几十M&#xff0c;也可能会出现卡顿。相对的&#xff0c;线上经常遇到IO敏感进程偶发IO超时问题。这些进程一次读写的文件数据量很少&#xff0c;正常几…

Redis的缓存过期淘汰策略

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码、Kafka原理、分布式技术原理、数据库技术&#x1f525;如果感觉博主的文章还不错的…

RocketMQ(Linux版本5.1.4)

1、停止之前的运行服务 [roottssvr1-c1 rocketmq-all-4.7.0-bin-release]# sh bin/mqshutdown namesrv No mqnamesrv running. [roottssvr1-c1 rocketmq-all-4.7.0-bin-release]# [roottssvr1-c1 rocketmq-all-4.7.0-bin-release]# [roottssvr1-c1 rocketmq-all-4.7.0-bin-r…

Debezium发布历史39

原文地址&#xff1a; https://debezium.io/blog/2018/09/19/debezium-0-8-3-final-released/ 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. Debezium 0.8.3.Final 发布 2018 年 9 月 19 日 作者&#xff1a; …

LOJ #6278 数列分块2题解 2024年第一篇题解

Part #0 . 前言 \text{Part \#0 . 前言} Part #0 . 前言 数列分块1 分块是一种优雅的暴力。 Part #1 . 数列分块入门2 \text{Part \#1 . 数列分块入门2} Part #1 . 数列分块入门2 传送门 观察题目&#xff0c;我们可以发现题目是一个区间查询&#xff0c;区间修改。 首先&a…

数据结构式新年贺词

冒泡排序&#xff0c;选择排序&#xff0c;插入排序&#xff0c;快速排序&#xff0c;堆排序&#xff0c;归并排序&#xff0c;希尔排序&#xff0c;桶排序&#xff0c;基数排序新年帮您排忧解难。 有向图&#xff0c;无向图&#xff0c;有环图&#xff0c;无环图&#xff0c;…

汽车保养软件app开发步骤

“增强您的动力&#xff0c;为您的旅程加油——每一刻都讲述着关爱的故事。构建汽车维护软件app&#xff0c;为您的车辆提供数字化的维修站&#xff0c;从而开启长寿之路。智能驾驶、互联驾驶、自信驾驶。” 疯狂地搜索旧收据并猜测上次换油时间的日子已经一去不复返了。如果您…

51单片机点灯入门教程——2. 呼吸灯效果

基本说明 本章使用芯片&#xff1a;STC8H8K64U核心板 芯片手册&#xff1a;点此查看 Keil 开发环境配置&#xff1a;点此查看 本章学习内容&#xff1a;利用库函数&#xff0c;开发C程序&#xff0c;实现呼吸灯效果。 代码实例 需求&#xff1a;使用串口来控制呼吸灯效果&…

ElasticSearch Nested类型全文检索、聚合查询

ElasticSearch Nested类型全文检索、聚合查询 Nested类型全文检索 创建索引 PUT /products1 {"mappings": {"properties": {"fulltext": {"type": "text"},"name": {"type": "text","…

JavaScript 基础通关

快速熟悉 JavaScript 的基础语法&#xff0c;比较高级的比如事件放在后面的笔记中。 JavaScript 1. JavaScript 介绍 1.1 JavaScript 基本介绍 JavaScript 是一门运行在客户端&#xff08;浏览器&#xff09;的编程语言&#xff0c;实现人机交互的效果。实现网页特效、表单验…

Python入门学习篇(十四)——模块文件操作

1 模块 1.1 理解 包: python中带有__init__.py文件的文件夹 模块: 文件名(不包含.py后缀),如python官方的time.py中time就是模块1.2 示例代码 import datetime# 调用datetime模块中的datetime类的now()方法 t datetime.datetime.now() # 格式化输出日期和时间 strftime(&qu…

基于BP神经网络的磨具变形量分析,BP神经网络详细原理

目录 摘要 BP神经网络参数设置及各种函数选择 参数设置 训练函数 传递函数 学习函数 性能函数 显示函数 前向网络创建函数 BP神经网络训练窗口详解 训练窗口例样 训练窗口四部详解 基于BP神经网络的磨具变形量分析 完整代码下载链接:基于BP神经网络的磨具变形量分析(代码完整…