定时器与异步任务

101 阅读3分钟

定时器

1.setInterval

   语法: setInterval(函数,数字)

     函数: 每次定时器重新执行的时候,要做的事情(要执行的代码)

     数字: 当前定时器每个多长时间重新执行一次,单位是毫秒

2.setTimeout

   语法: setTimeout(数字,函数)

     函数: 倒计时执行的时候, 要做的事情(要执行的代码)

     数字: 当前倒计时器延迟多长时间执行(只会执行一次), 单位是毫秒

   当不传递第二个参数的时候 , 或者传递的是0的时候

   执行速度会按照最快的速度执行

   最快的速度一般为 4~20 毫秒 , 最快速度与电脑性能有关

   所以在书写定时器或者倒计时器的时候,需要我们指定一个时间,一般不要不写或者给 0 毫秒

    1.定时器
    setInterval(function () {
         console.log('定时器每次执行的时候, 我就会被打印一次')
     }, 1000)
     setInterval(function () {
         console.log('定时器每次执行的时候, 我就会被打印一次')
     }, 0)
     setInterval(function () {
         console.log('定时器每次执行的时候, 我就会被打印一次')
    })
    2.倒计时器
     setTimeout(function () {
         console.log('倒计时器时间到的时候, 我会执行一次')
    }, 1000)
     setTimeout(function () {
         console.log('倒计时器时间到的时候, 我会执行一次')
     }, 0)
     setTimeout(function () {
         console.log('倒计时器时间到的时候, 我会执行一次')
     })

定时器的返回值

   意义:

     表明当前定时器是这个页面的第几个定时器

   注意:

     如果页面的打开方式是利用  liveserver  启动的,那么定时器的ID,会不太一样

   作用:

     能够利用返回值关闭这个定时器

   关闭语法1:clearInterval(要关闭的定时器的返回值)

   关闭语法2:clearTimeout(要关闭的定时器的返回值)

   注意:关闭语法可以混用,所以只要关闭定时器,随便写上边那个都可以

     但是推荐对应的书写,目的是为了让别人一眼看出关闭的是定时器还是倒计时器

JS的异步任务

   JS是单线程的,同一时间只能做一件事

   如果 只有单线程那么可能会遇到一些问题

   上述的方案 如果遇到中间的代码 耗时很久,那么后续的所有代码,都需要等待上边的代码,都需要等待上边的代码执行完毕后

   这种情况给用户的感觉是非常卡顿

   所以为了 结束上述的问题 , JS 将代码分为两个任务

   同步任务

     目前所接触到的内容中,除了两个定时器之外的都是同步任务

   异步任务

     目前所接触到的内容中,只有两个定时器算是异步任务,将来还会有新的异步任务

JS中代码执行的顺序

   代码从上到下执行

   先将代码中所有的同步任务,全部执行一遍

   同行任务执行完毕后,在执行异步任务

   如果代码中间遇到了异步任务,那么先将异步任务暂存到一个任务列表中,等待所有同步任务执行完毕后执行

    console.log('1. JS开始执行')

    setTimeout(function () {
        console.log('2. 一个非常耗时的任务执行完毕')
    })
  
    console.log('3. JS执行完毕')

   同步任务

     1.JS开始执行

     3.JS执行完毕

   异步任务

     2.一个非常耗时的任务执行完毕