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 相关文章推荐
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
jQuery实现简单隔行变色的方法
Feb 20 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
Bootstrap插件全集
Jul 18 Javascript
深入理解node.js之path模块
May 03 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
微信小程序点击保存图片到本机功能
Dec 13 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 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
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
Python文件夹与文件的操作实现代码
2014/07/13 Python
浅谈Python中的数据类型
2015/05/05 Python
python实现单向链表详解
2018/02/08 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
python3 简单实现组合设计模式
2020/07/02 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
大学生职业规划书的范本
2014/02/18 职场文书
家长写给老师的建议书
2014/03/13 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
高中班主任评语
2014/12/30 职场文书
辞职信的写法
2015/02/27 职场文书
童年读书笔记
2015/06/26 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android