JavaScript的BOM学习笔记——2、延时函数和执行机制-优快云博客

大家好，我是阿赵。继续学习JavaScript的BOM，这次来学习一下延时函数和JavaScript的执行机制。

一、延时函数

1、延时函数的使用

1. 延时函数的添加

语法：

setTimeout(回调函数，等待的毫秒数)

作用：指定一个回调函数，在等待的时间结束之后，就执行回调函数。
例子：

  <script>
    console.log(new Date().toTimeString());
    setTimeout(() => {
      console.log(new Date().toTimeString());
    }, 3000);
  </script>

结果：
在这里插入图片描述

从结果可以看到，先打印了一个时间，然后在3秒后，又打印了一个时间。

2. 延时函数的清除

如果在延时函数指定的时间还没到的时候，我们想提早取消延时函数，可以用清除方法。
语法：

let timeId = setTimeout(回调函数，毫秒数)
clearTimeout(timer)

例子：

<body>
  <button>点击停止倒计时</button>
  <script>
    console.log(new Date().toTimeString());
    var btn = document.querySelector('button');

    let timeId = setTimeout(() => {
      console.log(new Date().toTimeString());
    }, 3000);
    btn.addEventListener('click', function () {
      clearTimeout(timeId);
    }, false);
  </script>
</body>

这时候多了一个按钮出来，如果在倒计时结束之前点击按钮，就会取消延时函数。

2、延时函数和间歇函数的区别

在之前学习DOM的时候，学习过另外一个计时器函数，叫做间歇函数setInterval。那么两者之间有什么区别呢？

1. 间歇函数setinterval

每隔一段时间就执行一次，除非手动清除，不然会一直执行下去。

2. 延时函数setTimeout

只执行一次，在执行完之后就失效。

二、 JavaScript执行机制

1、同步和异步任务

JavaScript语言的一大特点是单线程，同时只能做一件事情。所以所有的任务都需要排队等待执行。
为了解决这个问题，利用多核cpu计算能力，HTML5剔除了webworker标准，允许JavaScript脚本创建多个线程，于是，JavaScript出现了同步任务和异步任务。

1. 同步任务

在主线程上执行，按照顺序一次执行。当一个任务执行完毕后，下一个任务才会开始执行，形成执行栈。
这种执行方式简单直接，但在处理耗时操作时会导致程序堵塞。

2. 异步任务

通过回调函数实现，添加到任务队列，不会阻塞程序的其他部分。

2、执行顺序

1.先执行在执行栈里面的同步任务
2.异步任务放入任务队列
3.一旦执行栈内的同步任务执行完毕，系统会按次序读取任务队列中的异步任务，进入执行栈，开始执行。

之前学习的延迟函数，也是异步任务，所以可以拿它来举一个例子：

  <script>
    console.log(1);
    setTimeout(() => {
      console.log(2);
    }, 0);
    console.log(3);
  </script>

在这个例子里面，如果按照顺序，是先执行打印1，然后执行setTimeout，再执行打印3。重点问题是，在setTimeout里面设置的时间是0，按道理应该立刻执行，那么打印2是应该在打印3的前面还是后面呢？
运行的结果是：
在这里插入图片描述

打印2是在打印3之后才执行的，这就是和刚才说的执行顺序有关了，先把主线程执行栈里面的同步任务执行完毕，再去获取异步任务列表执行。
由于主线程不断的重复获得任务，执行任务，再次获得任务再执行。所以这种机制称为事件循环(event Loop)。

在这里插入图片描述