JavaScript的定时器用法详解

这篇具有很好参考价值的文章主要介绍了JavaScript的定时器用法详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

定时器

●在 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全套视频教程(10天学会Js,前端javascript入门必备)文章来源地址https://www.toymoban.com/news/detail-620946.html

到了这里,关于JavaScript的定时器用法详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Python中的定时器用法:Timer定时器和schedule库

    目录 一、引言 二、Timer定时器 1、Timer定时器的原理 2、Timer定时器的使用方法 3、Timer定时器的实际应用案例 三、schedule库 1、schedule库的原理 2、schedule库的使用方法 3、schedule库的实际应用案例 四、Timer定时器和schedule库的比较 1、功能差异 2、适用场景 五、实际应用案例 六、

    2024年01月16日
    浏览(71)
  • javaScript定时器函数

    js 定时器有以下两个方法: setInterval() ,setTimeout() 作用  这个函数可以将一个函数每隔一段时间执行一次 返回值  返回一个Number类型的数据,这个数字用来作为定时器的唯一标识  可以用clearInterval()关闭setInterval()

    2024年02月08日
    浏览(60)
  • JavaScript定时器

    JavaScript定时器有两种, setTimeout():指定时间后执行一段代码(延迟执行)。 setInterval():每隔一段时间执行一段代码(间隔执行)。 1、setTimeout() 定时器 语法: setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。 具体用法: 定时五秒钟出现弹窗‘

    2024年02月07日
    浏览(41)
  • 51单片机中断定时器1用法

    中断为使单片机具有对内部或外部随机发生的事件实时处理而设置的。 中断技术不仅解决了快速主机与I/O设备的数据传送问题,而且还有具有如下的优点: 1. 分时操作:CPU可以分时为多个I/O设备服务,提高了计算机的利用率。 2. 实时操作:CPU能够及时处理应用系统的随机事

    2024年02月06日
    浏览(57)
  • AWTK 开源串口屏开发(6) - 定时器的用法

    定时器也是一个常用的功能,在 AWTK 串口屏中,可以给每个控件(包括窗口)创建一个定时器,定时器到点后触发 v-on:timer 事件。在 AWTK 串口屏中,提供了 6 个定时器相关函数: start_timer 启动定时器。 stop_timer 停止定时器。 suspend_timer 暂停定时器。 resume_timer 恢复暂停的定时

    2024年01月23日
    浏览(36)
  • 使用Js定时器来定时跳转

    🍎道阻且长,行则将至。🍓 Js小记🍀 记录:想实现在5秒后跳转到指定页面,使用到 JS定时器 和 Location 对象。 有两种定时器: setTimeout 和 setInterval ,一个是在指定时间结束后执行一次,另一个是根据指定时间循环。 Location 对象是 JavaScript 对地址栏封装的对象。可以通过操

    2023年04月08日
    浏览(43)
  • js实现定时器

    用原生js实现一个倒计时效果.最下面有全部源码,需要自取 js语法 : setTimeout :定时器 document.getElementById :Document的方法 getElementById()返回一个匹配特定 ID的元素。由于元素的 ID 在大部分情况下要求是独一无二的,这个方法自然而然地成为了一个高效查找特定元素的方法。 remove

    2024年02月11日
    浏览(72)
  • js 定时器

    JavaScript 中的定时器(Timer)是一种机制,用于在指定的时间间隔之后执行代码或者在指定的时间点执行代码。它可以用来实现延迟执行、周期性执行等需求。 JavaScript 提供了两个主要的定时器函数: setTimeout() : setTimeout() 函数用于在指定的时间延迟后执行一次代码。 第一个

    2024年02月10日
    浏览(53)
  • JS 定时器setInterval()

    过多的就不描述了,可以直接参考官方文档: 官方文档:https://developer.mozilla.org/en-US/docs/Web/API/setInterval 参考文档:https://www.jianshu.com/p/55b4eb04b1d3 直接上干货 setInterval(参数1,参数2) setInterval(方法名, 1000 * 60 * 1); 描述:定时执行 间隔执行 注意: 1.参数1可以是一个匿名函数 也可以是

    2024年02月13日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包