JavaScript倒计时定时器和间隔定时器使用详解

更新时间：2023年05月23日 10:25:55 作者：陆荣涛

这篇文章主要为大家介绍了JavaScript倒计时定时器和间隔定时器使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>

定时器

在 js 里面，有两种定时器，倒计时定时器和间隔定时器

倒计时定时器也叫一次性定时器或者叫延时定时器

间隔定时器也叫间歇定时器或者叫反复性定时器

倒计时定时器

倒计时多少时间以后执行函数

语法： setTimeout(要执行的函数，多长时间以后执行)

会在你设定的时间以后，执行函数

var timerId = setTimeout(function () {
  console.log('我执行了')//1秒后执行我执行了 只执行一次
}, 1000)
console.log(timerId) // 1 这个1说明页面上只有一个定时器

时间是按照毫秒进行计算的，1000 毫秒就是 1秒钟

所以会在页面打开 1 秒钟以后执行函数

只执行一次，就不在执行了

返回值是，当前这个定时器是页面中的第几个定时器

间隔定时器

每间隔多少时间就执行一次函数

语法： setInterval(要执行的函数，间隔多少时间)

var timerId = setInterval(function() {
    console.log('我执行了')//间隔1秒执行一次 我执行了
}, 1000)
console.log(timerId);//1  这个1说明页面上只有一个定时器

时间和刚才一样，是按照毫秒进行计算的

每间隔 1 秒钟执行一次函数

只要不关闭，会一直执行

返回值是，当前这个定时器是页面中的第几个定时器

定时器的返回值

设置定时器的时候，他的返回值是部分 setTimeout 和 setInterval 的

只要有一个定时器，那么就是一个数字

var timerId = setTimeout(function () {
  console.log('倒计时定时器')
}, 1000)
var timerId2 = setInterval(function () {
  console.log('间隔定时器')
}, 1000)
console.log(timerId) // 1
console.log(timerId2) // 2

js的异步代码执行机制

同步

代码从上到下依次执行, 上一行没有执行完毕, 下一行不会开始

异步

当 js 遇到异步代码的时候, 会先拿出来, 放在异步队列内等待, 暂时不执行

因为 js 是一个单线程的代码, 同时只能做一个事情

同步和异步的执行时间

同步代码优先执行，执行完了同步代码以后在去执行异步代码。

异步代码在宿主环境中执行执行完毕以后存放到任务队列中

同步代码执行完毕以后时间循环机制Event loop回去任务队列中调用异步代码

把异步任务添加到执行栈中进行执行

console.log('start')  // start  第一打印出來的
setTimeout(function() {
    console.log('timeout') //timeout  最后打印出來的
}, 0)
console.log('end')//end  第二打印出來的

以上就是JavaScript倒计时定时器和间隔定时器使用详解的详细内容，更多关于JavaScript定时器的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

JavaScript实现QQ列表展开收缩扩展功能
这篇文章主要为大家详细介绍了JavaScript实现QQ列表展开收缩扩展功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
Javascript删除数组里的某个元素
今天小编就为大家分享一篇关于Javascript删除数组里的某个元素，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-02-02
JavaScript实现图片放大预览效果
这篇文章主要介绍了JavaScript实现图片放大预览效果，帮助大家更好的理解和制作JavaScript特效，感兴趣的朋友可以了解下
2020-11-11
微信小程序实现日历签到
这篇文章主要为大家详细介绍了微信小程序实现日历签到功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
JavaScript delete 属性的使用
JavaScript对象数据结构基本形式:{ key : value},其中key:value就为对象的一个属性,key作为属性名称,value为属性值,这值可以是任何JavaScript数据类型。
2009-10-10
不用一句js代码初始化组件
不用一句js代码初始化组件，是不是很神奇？
2016-01-01
探讨js中的双感叹号判断
js中的双感叹号判断。在网上查了些资料，他相当于三元运算符，返回boolean值
2013-11-11
javascript forEach函数实现代码
在Base2中找到一个叫forEach的函数，是我见过的最好的实现。挖出来分析一下。它能对各种普通对象，字符串，数组以及类数组进行遍历。如果原游览器的对象已实现此函数，它则调用原对象的函数。
2010-01-01
JS 非图片动态loading效果实现代码
功能说明：譬如在按某个button时，显示消息"Loading”，然后每隔一秒后后面加上"."，至一定数量的"."时如："Loading..."，再重置此消息为"Loading"，继续动态显示，直至按钮事件处理完成。
2010-04-04
JS+Canvas实现接球小游戏的示例代码
本文主要为大家详细介绍了如何利用JS+Canvas实现接球小游戏，文中的示例代码讲解详细，对我们学习有一定的帮助，感兴趣的小伙伴可以了解一下
2022-06-06