js的异步执行

时间:2022-12-29 16:38:30

1.Javascript语言的执行环境是”单线程”(single thread):

优点:实现起来比较简单,执行环境相对单纯;

缺点:只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他任务无法执行。

为了解决这个问题,Javascript语言将任务的执行模式分成两种:同步(Synchronous)异步(Asynchronous)

2.”异步模式”编程的几种方法:

(1)回调函数:优点是简单、容易理解和部署,缺点是不利于代码的阅读和维护,各个部分之间高度耦合(Coupling),使得程序结构混乱、流程难以追踪(尤其是回调函数嵌套的情况),而且每个任务只能指定一个回调函数。

(2)采用事件驱动模式(事件监听):优点是比较容易理解,可以绑定多个事件,每个事件可以指定多个回调函数,而且可以”去耦合“(Decoupling),有利于实现模块化。缺点是整个程序都要变成事件驱动型,运行流程会变得很不清晰。

(3)观察者模式(发布\订阅模式):这种方法的性质与”事件监听”类似,但是明显优于后者。因为我们可以通过查看”消息中心”,了解存在多少信号、每个信号有多少订阅者,从而监控程序的运行。

3.异步操作的流程控制。

(1)串行执行:编写一个流程控制函数,让它来控制异步任务,一个任务完成以后,再执行另一个。

var items = [ 1, 2, 3, 4, 5, 6 ];
var results = [];
function series(item) {
if(item) {
async( item, function(result) {
results.push(result);
return series(items.shift());
});
} else {
return final(results);
}
}
series(items.shift());

函数series就是串行函数,它会依次执行异步任务,所有任务都完成后,才会执行final函数。items数组保存每一个异步任务的参数,results数组保存每一个异步任务的运行结果。

(2)并行执行:所有异步任务同时执行,等到全部完成以后,才执行final函数。

//forEach方法会同时发起6个异步任务,等到它们全部完成以后,才会执行final函数。
var items = [ 1, 2, 3, 4, 5, 6 ];
var results = []; items.forEach(function(item) {
async(item, function(result){
results.push(result);
if(results.length == items.length) {
final(results);
}
})
});

并行执行的好处是效率较高,比起串行执行一次只能执行一个任务,较为节约时间。但是问题在于如果并行的任务较多,很容易耗尽系统资源,拖慢运行速度。因此有了第三种流程控制方式。

(3)并行与串行的结合:设置一个门槛,每次最多只能并行执行n个异步任务。这样就避免了过分占用系统资源。

//变量running记录当前正在运行的任务数,只要低于门槛值,就再启动一个新的任务
//如果等于0,就表示所有任务都执行完了,这时就执行final函数
//最多只能同时运行两个异步任务。
var items = [ 1, 2, 3, 4, 5, 6 ];
var results = [];
var running = 0;
var limit = 2; function launcher() {
while(running < limit && items.length > 0) {
var item = items.shift();
async(item, function(result) {
results.push(result);
running--;
if(items.length > 0) {
launcher();
} else if(running == 0) {
final();
}
});
running++;
}
} launcher();

如有错误,请您指正!

参考文档:

Promise对象

js的异步执行的更多相关文章

  1. 如何使js函数异步执行

    CallbacksCallbacks使用场景在哪里?在很多时候需要控制一系列的函数顺序执行.那么一般就需要一个队列函数来处理这个问题: function Aaron(List, callback) { ...

  2. js 后台异步执行

    public void AlertMsg(string msg, bool async) { string script = string.Format("alert('{0}'); &qu ...

  3. 浅析JS异步执行机制

    前言 JS异步执行机制具有非常重要的地位,尤其体现在回调函数和事件等方面.本文将针对JS异步执行机制进行一个简单的分析. 从一份代码讲起 下面是两个经典的JS定时执行函数,这两个函数的区别相信对JS有 ...

  4. 异步执行js脚本——防止阻塞

    JS允许我们修改页面中的所有方面:内容,样式和用户进行交互时的行为. 但是js同样可以阻塞DOM树的形成并且延迟页面的渲染. 让你的js变成异步执行,并且减少不必要的js文件从而提高性能. JavaS ...

  5. 获取node异步执行结果的方式

    拿数据库操作举例: var connection = mysql.createConnection(); connection.query(sql,function(err,rows){xxx} ); ...

  6. &lpar;转载&rpar;js引擎的执行过程(二)

    概述 js引擎执行过程主要分为三个阶段,分别是语法分析,预编译和执行阶段,上篇文章我们介绍了语法分析和预编译阶段,那么我们先做个简单概括,如下: 语法分析: 分别对加载完成的代码块进行语法检验,语法正 ...

  7. js文件引用方式及其同步执行与异步执行

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp74   任何以appendChild(scriptNode) 的方式引入 ...

  8. 深入理解 JS 引擎执行机制(同步执行、异步执行以及同步中的异步执行)

    首先明确两点: 1.JS 执行机制是单线程. 2.JS的Event loop是JS的执行机制,深入了解Event loop,就等于深入了解JS引擎的执行. 单线程执行带来什么问题? 在JS执行中都是单 ...

  9. 不阻塞浏览器的解析,待外部js下载完成后异步执行

    网站统计中的数据收集原理及实现(js埋点实现) - lastwhisper - CSDN博客 https://blog.csdn.net/l1212xiao/article/details/80450 ...

随机推荐

  1. Moon&period;Orm 常见查询实例

    一.Moon.Orm框架总述 (您还用hibernate?实体框架?) 1.框架名:Moon 意思是月亮,而非Mono.因为很喜欢明月,所以以此为名.它是一个.NET下的Orm框架. 2.发展历史:历 ...

  2. 【JAVA Properties类概述】

    一.概述. 之前说过,该对象是和IO流相结合的技术,所以和IO流结合在一起来讲比较合适. public class Propertiesextends Hashtable<Object,Obje ...

  3. asp&period;net实现GZip压缩和GZip解压

    最近在开发一个网站doc.115sou.com,使用到了GZip压缩技术,经过多次搜索找到asp.net中用GZip对数据压缩和解压缩非常方便,当我第一次拿到这个类的时候却感觉很迷茫,无从下手.主要是 ...

  4. Java简单算法--出圈问题

    package cn.magicdu.algorithm; import java.util.LinkedList; import java.util.List; /** * 出圈问题,数到某个数字的 ...

  5. 详解PHP的&lowbar;&lowbar;set&lpar;&rpar;、&lowbar;&lowbar;get&lpar;&rpar;、&lowbar;&lowbar;isset&lpar;&rpar;、unset&lpar;&rpar;四个方法

    PHP系统中给我们提供了很多预定义的方法,这些方法大部分都需要在类中声明,只有需要时才添加到类中.它们的作用.方法名称.使用的参数列表和返回值都是在PHP中预定好的,并且都是以两个下划线开始的方法名称 ...

  6. 解决python2&period;7&period;9以下版本requests访问https的问题

    在python2.7.9以下版本requests访问https连接后,总会报一些关于SSL warning. 解决法子可以参考:https://urllib3.readthedocs.io/en/la ...

  7. urses&period;ascii&period;ispunct&lpar;ch&rpar;&colon;

    Nullege: A Search Engine for Python source code urses.ascii.ispunct(ch): TypeError: 'unicode' object ...

  8. 20170717&lowbar;python爬虫之requests&plus;cookie模拟登陆

    在成功登陆之前,失败了十几次.完全找不到是什么原因导致被网站判断cookie是无效的. 直到用了firefox的httpfox之后才发现cookie里还有一个ASP.NET_SessionId 这个字 ...

  9. 深度学习的异构加速技术(一):AI 需要一个多大的&OpenCurlyDoubleQuote;心脏”?

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:kevinxiaoyu,高级研究员,隶属腾讯TEG-架构平台部,主要研究方向为深度学习异构计算与硬件加速.FPGA云.高速视觉感知等方向 ...

  10. Vue小技巧-懒加载

    Vue懒加载包括图片懒加载与路由懒加载 1.图片懒加载: 首先安装 vue-lazyload包 然后导入并加载事先下载好的加载图片 import VueLazyLoad from 'vue-lazyl ...