javascript中的定时器,同步异步,事件循环和任务队列等概念

[gitgundam]

定时器

用于设置延时

• setTimeout/clearTimeout
• 指定某个函数或代码在多少毫秒之后执行
• 返回一个整数，表示定时器的编号，以后可以用来取消这个定时器

function sayHello(){
console.log('hello')}
let timer1 = setTimeout(sayHello,1000)
clearTimeout(timer1)
let timer2 = setTimeout(()=>{
console.log('helloworld')},2000)

用于设置间隔

• setInterval/clearInterval
• 指定某个函数或代码在每间隔多少毫秒执行一次
• 返回一个整数，表示定时器的编号，以后可以用来取消这个定时器

function sayHello(){
console.log('hello')}
let timer1 = setInterval(sayHello,1000)
clearInterval(timer1)//停止设置的间隔运行
let timer2=setInterval(()=>{console.log('helloworld')},2000)//写成一行

js的单线程

众所周知,js是一个单线程的语言.那么什么是单线程呢?单线程即在处理多个任务时,需要按照顺序一件一件的来.上一个任务执行完成后再执行下一个任务.
比如下面这个例子

const useTime = t => {
  let start = Date.now()
  while(Date.now() - start < t) {}
  console.log(3)
}
function fn1(){
  console.log(1)
}
function fn2(){
  console.log(2)
}
fn1()
useTime(2000)//2000ms后输出3
fn2()

同步任务和异步任务

• 就如上面这个例子,前一个2000ms的任务执行完,才能继续执行下一个任务，但是，如果前一个任务的执行时间很长,那么下一个任务就必须要等着.给用户带来很差的体验.
• 因此,js可以先挂起耗时较长的任务,先运行接下来的任务,等耗时较长的任务执行完成后,再回头执行.所以js又分为同步任务和异步任务

同步任务

• 同步任务是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务，当我们打开网站时，网站的渲染过程，比如元素的渲染，其实就是一个同步任务

异步任务

• 异步任务是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程，当我们打开网站时，像图片的加载，音乐的加载，其实就是一个异步任务

js的任务队列

• 异步操作会将相关回调添加到任务队列中。而不同的异步操作添加到任务队列的时机也不同，如onclick, setTimeout,ajax 处理的方式都不同，这些异步操作是由浏览器内核的webcore来执行的，webcore包含下图中的3种 webAPI，分别是DOM Binding、network、timer模块。

js的事件循环

• 单线程从从任务队列中读取任务是不断循环的，每次栈被清空后，都会在任务队列中读取新的任务，如果没有任务，就会等到，直到有新的任务，这就叫做任务循环
• 因为每个任务都是由一个事件触发的，因此也叫作事件循环

js的主线程

• JS 只有一个线程，称之为主线程。
• 所有同步任务都在主线程上执行，行成一个执行栈
• 主线程之外，还存在一个任务队列，只要异步任务有了结果，就会在任务队列中放置一个事件
• 一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，看看里面还有哪些事件，那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行
• 主线程不断的重复上面的这一步