十四、两种常用的计时器以及简单的代码异步执行

88 阅读3分钟

常用的计时器分为两种,一种是setInterval计时器,另一种是setTimeout倒计时器。

一、setInterval

  1. 作用:计时器,每间隔固定的时间执行一次
  2. 语法:setInterval(函数,数字/时间)
  3. 函数:间隔固定的时间要执行的代码
  4. 数字:间隔的时间,单位是毫秒,最小值是4~20
var timeID = setInterval(function(){
     console.log('计时器')  
},1000)

二、setTimeout

  1. 作用:倒计时器,在指定时间到达后执行一次
  2. 语法:setTimeout(函数,数字/时间)
  3. 函数:在指定时间到达后要执行的代码
  4. 数字:间隔的时间,单位是毫秒
var timeID = setInterval(function(){
     console.log('倒计时器')  
},3000)

三、计时器的返回值

1.返回值不区分定时器种类,用于表示这个定时器是页面中的第几个定时器。 2. 作用:用来关闭定时器

var timeID1 = setInterval(function(){
     console.log('计时器')  
},1000)
var timeID2 = setInterval(function(){
     console.log('倒计时器')  
},3000)
console.log(timeID1)  //返回值为1,表示timeID1是页面中的第一个计时器
console.log(timeID2)  //返回值为2,表示timeID1是页面中的第二个计时器

四、关闭计时器

  1. 不区分定时器种类,只要给出正确的定时器返回值就可以关闭。
  2. 语法1:
  • clearTimeout(定时器返回值)
  • 正常来说,两种定时器都可以关闭。
  • 但是开发人员约定:这个定时器只能用来关闭倒计时器。目的就是为了让其他开发人员看到这行代码后,知道关闭了倒计时器。
  1. 语法2:
  • clearInterval(定时器返回值)
  • 正常来说,两种定时器都可以关闭。
  • 但是开发人员约定:这个定时器只能用来关闭计时器。目的就是为了让其他开发人员看到这行代码后,知道关闭了计时器。
var timeID1 = setInterval(function(){
     console.log('计时器')  
},1000)
var timeID2 = setInterval(function(){
     console.log('倒计时器')  
},3000)
clearInterval(timeID1)    //开发人员约定:关闭计时器
clearTimeout(timeID2)    //开发人员约定:关闭倒计时器

五、简单的代码异步执行

  1. 首先明确:什么是“非异步代码”?
  • 非异步代码就是按照从上往下、从左到右的顺序,依次执行每行代码,如果上一行代码没有执行完毕,不会执行下一行代码。
  1. 什么是“异步代码”?
  • 当代码遇到异步任务的时候,会把这个代码放在“异步队列”内等待,所有的同步代码执行完毕之后,再开始执行“异步队列”内的代码。
  • 简单来说,执行代码时,如果遇到异步任务, 会先把它放在“异步队列”内等待,然后继续往下执行,直到所有代码执行完毕之后,再开始执行异步任务。
  1. 什么是“异步任务”?
  • 两种计时器都是异步任务。
  • 可以理解为,先执行定时器外面的代码,再执行定时器里面的代码。
    console.log('开始')
    var timeID = setInterval(function(){
      console.log('计时器')
    },1000)
    console.log('1')
    console.log('2')
    console.log('3')
    console.log('4')
    console.log('结束')
    
/*打印结果:
       开始
        1
        2
        3
        4
       结束
       计时器
*/