JavaScript单线程异步机制

  • 浏览器打开会开辟多条线程来支撑浏览器的工作,但是分配给JS进行DOM操作的的线程永远只有一条,所以JS是单线程编程语言,那么JS是怎么进行异步操作代码的呢?

首先来看下面的一段代码
JavaScript单线程异步机制

输出的结果
JavaScript单线程异步机制

! 我们把定时器的时间设置成了0,代表只要运行了这段代码就立即进行里边函数的运行,然而并没有,而是先把主线程上的 console.log('5') 执行之后才挨个运行定时器

在JS中,所有任务可以分为两种,(主线程上的代码(同步),任务队列里的代码(异步))

  • 同步任务(synchronous):在主线程上执行的代码,比如循环,print这些操作

  • 异步任务(asynchronous):不在主线程上运行,遇见就丢到任务队列,像定时器操作

    • JS的线程执行流程:先执行主线程上的任务,只有当主线程执行完成之后才会执行队列里的任务,就像上面为什么定时器的时间是0还优先先执行下面的代码,因为主线程上的代码是优先执行的,等到主线程任务全部完成,才会进行任务队列里面的异步任务,造成了上面的结果

    • JS的运行机制 => 事件循环 + 回调函数

    • 只要主线程空了,就会去读取"任务队列",这就是JavaScript的运行机制。这个过程会不断重复。

      “任务队列"中的事件,除了IO设备的事件以外,
      还包括一些用户产生的事件(比如鼠标点击、页面滚动等等),
      比如$(selectot).click(function),这些都是相对耗时的操作。
      只要指定过这些事件的回调函数,这些事件发生时就会进入"任务队列”,等待主线程读取。

      所谓"回调函数"(callback),就是那些会被主线程挂起来的代码,前面说的点击事件$(selectot).click(function)中的function就是一个回调函数。异步任务必须指定回调函数,当主线程开始执行异步任务,就是执行对应的回调函数。例如ajax的success,complete,error也都指定了各自的回调函数,这些函数就会加入“任务队列”中,等待执行。