JavaScript中异步编程的示例分析-成都快上网建站

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 代码的线程只有一个,不妨叫它主线程。

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

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

JavaScript中异步编程的示例分析

其中,渲染线程和 JS 线程互斥

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

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

单线程的优缺点:

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

常见的堵塞(死循环):

while (true) {}

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

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

拿吃泡面举例:

  • 同步:买泡面=》烧水(盯着)=》煮面=》吃泡面

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

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

异步编程

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

异步代码

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

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

同步代码异步代码