JavaScript的定时器用法详解

谁借莪１个温暖的怀抱￠ 2024-03-17 15:32 56阅读 0赞

### 定时器 ###

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

**关注我了解更多"前端"技术知识！**