JS setTimeout与setInterval的区别


Posted in Javascript onApril 20, 2022

I. 总述

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

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

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

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

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

II. setTimeout()函数

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

setTimeout(function,times);

是的,就是这么简单的格式,其中,我们需要两个参数,分别是一个函数和一个int值函数表示延迟一段时间后要执行的函数体,int值就是我们说的这段时间,例如我们看这段简单的代码:

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

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

JS setTimeout与setInterval的区别

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

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

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

然而实际上是这样的:【点我揭晓】

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

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

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

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);
}

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

III. setInterval()函数

第二个函数setInterval()就没那么复杂了,但是它的功能确实很强大的,我们先看看它的使用格式

setInterval(function,times);

依旧是两个参数,同setTimeout()格式一致,它可以以设置的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()函数的对象即可。

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>

实现的效果是下面这样的动图

JS setTimeout与setInterval的区别

总结

到此这篇关于JavaScript setTimeout和setInterval的用法与区别的文章就介绍到这了!

Javascript 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
js实现三级联动效果(简单易懂)
Mar 27 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
Vue OpenLayer测距功能的实现
vue 给数组添加新对象并赋值
Apr 20 #Vue.js
vue 数字翻牌器动态加载数据
Apr 20 #Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 #Vue.js
vue封装数字翻牌器
Apr 20 #Vue.js
vue特效之翻牌动画
Apr 20 #Vue.js
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 #Javascript
You might like
动态生成gif格式的图像要注意?
2006/10/09 PHP
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
浅谈Python处理PDF的方法
2017/11/10 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
上班早退检讨书
2014/01/09 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
敬老模范事迹
2014/05/21 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
入党现实表现材料
2014/12/23 职场文书
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers