setTimeout(() =>{
        console.log('函数外延时器')
      },0)
      let m = 0
      let t = setInterval(() => {
        m++
        console.log('函数外部setInterval=='+m)
        if (m > 3) {
          clearInterval(t)
          console.log('函数外部setInterval完成')
          return
        }
      }, 0);
      let a = () => {
        let y = 0
        let t1 = setInterval(() => {
          y++
          console.log('任务1-setInterval=='+y)
          if (y > 3) {
            clearInterval(t1)
            console.log('任务1-setInterval完成')
            return
          }
        }, 0);
          setTimeout(() => {
            console.log('任务1')
          }, 0)
          for (let i = 0; i < 5000; i++) {
            console.log('a的for循环')
          }
          console.log('a事件执行完')
        }
        let b = () => {
          setTimeout(() => {
            console.log('任务2')
          }, 0)
          for (let i = 0; i < 5000; i++) {
            console.log('b的for循环')
          }
          console.log('b事件执行完')
        }
        let c = () => {
          setTimeout(() => {
            console.log('任务3')
          }, 0)
          for (let i = 0; i < 5000; i++) {
            console.log('c的for循环')
          }
          console.log('c事件执行完')
        }
        a();
        b();
        c();

执行结果:
在这里插入图片描述
结论:

  1. js单线程
  2. 浏览器遇到setTimeout或者setInterval时会先执行完当前代码块,执行前会将这两个定时器放入待执行栈
  3. 当前代码执行完后再去栈里找任务,有则再执行栈内任务
  4. 即使时间设置为0,依旧如此
  5. for循环结束后执行后面的代码
Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐