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 相关文章推荐
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 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
PHP下常用正则表达式整理
2010/10/26 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
动态添加js事件实现代码
2009/03/12 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
手机端转换rem适应
2017/04/01 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
微信小程序实现拼图小游戏
2020/10/22 Javascript
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
python实现网站微信登录的示例代码
2019/09/18 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
如何利用Python写个坦克大战
2020/11/18 Python
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
业务助理岗位职责
2013/11/18 职场文书
煤矿班组长岗位职责
2013/12/29 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
创新比赛获奖感言
2014/02/13 职场文书
化工工艺设计求职信
2014/06/25 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server