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) // 2js的异步代码执行机制
同步
代码从上到下依次执行, 上一行没有执行完毕, 下一行不会开始
异步
当 js 遇到异步代码的时候, 会先拿出来, 放在异步队列内等待, 暂时不执行
因为 js 是一个单线程的代码, 同时只能做一个事情
同步和异步的执行时间
同步代码优先执行，执行完了同步代码以后在去执行异步代码。
异步代码在宿主环境中执行 执行完毕以后存放到任务队列中
同步代码执行完毕以后时间循环机制Event loop回去任务队列中调用异步代码
把异步任务添加到执行栈中进行执行
console.log('start') // start 第一打印出來的
setTimeout(function() {
console.log('timeout') //timeout 最后打印出來的
}, 0)
console.log('end')//end 第二打印出來的以上就是JavaScript倒计时定时器和间隔定时器使用详解的详细内容，更多关于JavaScript定时器的资料请关注脚本之家其它相关文章！
相关文章
JS关键字变色详细很多朋友都很想实现吧接下来将执行以下几个步骤：1.替换关键字，对字体变色2.用正则，CSS背景变色;该方法可结合前台JS调用，感兴趣的朋友可以参考下，希望可以帮助到你2013-02-02
这篇文章主要是对Javascript变量作用域进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
到现在，我们就有讨论 JavaScript 中的原型和继承问题的基础了。它虽然并不像你在 C++、Java 或 C# 中了解的经典继承模式一样，但这种方式同样强大，并且有可能会更加灵活2014-07-07
这篇文章主要介绍了基于JavaScript实现猜数字游戏代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
JavaScript中Window对象stop()方法用于停止页面载入,该方法类似在浏览器上点击停止载入按钮,如果页面在载入图片或框架(iframe)时间过长,我门可以使用该方法来停止载入,可以应用在判断页面载入时间,过长就不加载特效2023-09-09
本文给大家总结了三种js清空数组的方法，每种方法都与众不同，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-12-12
本文主要介绍了JavaScript过滤关键字的方法。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章详细介绍了如何使用在线工具将JSON数据转换为TypeScript接口代码的全过程,工具通过输入清洗、JSON解析、类型名生成、类型推断、对象转声明文本等步骤,最终生成可读性强且准确的TypeScript代码,需要的朋友可以参考下2026-02-02
这篇文章主要介绍了JavaScript接口实现方法,结合实例形式详细分析了JavaScript接口实现原理、操作步骤与相关注意事项,需要的朋友可以参考下2020-05-05
javascript语句中的CDATA标签的意义...2007-05-05
最新评论