JavaScript中异步编程的示例分析

这篇文章给大家分享的是有关JavaScript中异步编程的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联建站长期为上1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为北戴河企业提供专业的网站设计制作、成都网站建设，北戴河网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

目的

• 提升开发效率，编写易维护的代码

引子问题

• 请求时候为什么页面卡死？？

$.ajax({
  url: "www.xx.com/api",
  async: false, // true
  success: function(result) {
    console.log(result);
  },
});

• 为什么数据更新了，DOM 却没有更新？？

// 异步批量更新DOM（vue-nextTick）
// {{num}}

new Vue({
  el: "#app",
  data: {
    num: 0,
  },
  mounted() {
    let dom = document.getElementById("app");
    while (this.num !== 100) {
      this.num++;
    }
    console.log("Vue num=" + this.num, "DOM num=" + dom.innerHTML);
    // Vue num=100,DOM num=0
    // nextTick or setTimeout
  },
});

产生异步的原因

原因：单线程（一个时间点，只做一件事），浏览器的 JS 引擎是单线程导致的。

单线程是指在 JS 引擎中负责解释和执行 IavaScript 代码的线程只有一个，不妨叫它主线程。

所谓单线程，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成再执行后面一个任务。

先看看一下浏览器内核的线程图:

其中，渲染线程和 JS 线程互斥。

假设有两个函数，一个修改一个删除，同时操作一个 DOM 节点，假如有多个线程的话，两个线程一起执行，肯定就死锁了，就会有问题。

为什么 JS 要设计为单线程，因为浏览器的特殊环境。

单线程的优缺点：

这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段 Javascript 代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。

常见的堵塞（死循环）：

while (true) {}

JS 在设计之初就以运行在浏览器中的脚本语言，所以也不想搞得这么复杂，就设计成了单线程，也就是，一个时间点，只能做一件事。

为了解决单线程堵塞这个缺点：产生了异步。

拿吃泡面举例：

• 同步：买泡面=》烧水（盯着）=》煮面=》吃泡面

• 异步：买泡面=》烧水（水开了热水壶响-回调）=》看电视=》煮面（面好了热水壶响-回调）=》看电视=》熟了叫我=》吃泡面

看电视就是异步操作，热水壶响，就是回调函数。

异步编程

JS 中大多的代码都是同步执行的，只有极个别的函数是异步执行的，异步执行的代码，则需要异步编程。

异步代码

setTimeout(() => {
  console.log("log2");
}, 0);
console.log("log1");
// ?? log1 log2

异步代码的特点：不是立即执行，而是需要等待，在未来的某一个时间点执行。