JavaScript定时器全解析:一次性与间隔性定时器的奥秘

职场   2025-01-14 13:00   北京  


 定时器


在 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  第二打印出來的

推荐一个受到超多好评的终生学习小程序「千锋学习站」

全网超火的课程资源:涵盖18个IT行业热门课程,3000G精品授课视频,从入门到精通,理论+实战,小白适用!
全网超牛的公开课:定期邀请一线大厂大佬来直播间宣讲,全程干货,福利满满,从基础理论到实战案例,分享实战IT技能,拒绝纸上谈兵!
全网超全的题库资源:1800个知识点练习,10万道面试真题,沉浸式刷题练习,帮助各位同学夯实基础,提升技术水平,为升职加薪保驾护航!
— 不负每份期待,继续与你共同成长—
点击下方小卡片,开始学习吧
👇👇👇

End -

想要获得技能提升和职业发展
点击即可学习免费好课哦!
 
 
免费好课推荐:
 Linux云计算 | Java开发 | 鸿蒙 | Python数据分析 | 物联网 | 网络安全 | 游戏原画 | 软件测试 | Unity游戏 | PMP项目管理 | HTML5大前端 | 全媒体运营 | UI/UE设计 | 影视剪辑 | C++ | 大数据 | 计算机二级


大前端私房菜
每天推出前端开发技巧、工具资源、项目实战等主题内容。在这里,你可以找到前端性能优化的私房秘籍,JavaScript 个性化框架的私房推荐,也有过时技术的私房警示。期待在公众号与更多小伙伴相遇!我们一起进步,共同成长
 最新文章