我们知道,在适用js的时候,程序是单线程执行的,而且如果遇到阻塞就会将浏览器卡死。
能否异步的执行,让程序不再卡呢?
可以,用setTimeout。
但是,问题又来了,如果我有这样的要求:
执行一个函数a;
暂停5秒;
执行函数b;
暂停5秒;
输出结果,暂停5秒后自动清空显示。
以上的这段逻辑伪代码使用JavaScript难以直接实现,因为setTimeout的时候,你根本不知道他什么时候执行结束。
jQuery有when方法可以解决问题,但是其嵌套性又让人伤神。
为此,我造了一个简单的*,发布出来,与开源社区共享。
*代码:
/**
*
* @authors sunsoft (sunruiyeyipeng@163.com)
* @date 2015-04-30 22:26:22
* @version v1.0
*/
function Executor() {
return {
oSequence: [],
Params: {},
microInterval: 10,
add: function(func, delay) {
var that = this;
var option = {
delayInit: delay,
startDateTime: null,
state: "wait",
delegateFunc: func,
done: function() {
this.state = "done";
},
getParam: function(paramname) {
return that.Params[paramname];
},
setParam: function(paramname, value) {
that.Params[paramname] = value;
}
};
this.oSequence.push(option);
},
exec: function() {
this.oSequence.reverse();
var that = this;
//active the first one
this.oSequence[that.oSequence.length - 1].startDateTime = new Date();
var fTmp = function() {
if (that.oSequence.length > 0) {
var oTask = that.oSequence[that.oSequence.length - 1];
if (oTask.state == "done") {
//如果任务已经完成,就删除这个节点
that.oSequence.pop();
//如果还有下一个节点,则将它的开始时间设置好
if (that.oSequence.length > 0) {
oTask = that.oSequence[that.oSequence.length - 1];
oTask.startDateTime = new Date();
}
}
if (oTask.state == "wait" && oTask.startDateTime != null && (new Date()) - oTask.startDateTime > oTask.delayInit) {
oTask.state = "processing";
oTask.delegateFunc(oTask);
}
setTimeout(fTmp, that.microInterval);
} else {
console.log("done");
}
}
fTmp();
},
sleep: function(millSec) {
this.add(function(task) {
task.done();
}, millSec);
}
};
}
测试代码:
$(document).ready(function() {
examples();
}); function examples() {
var oExecutor = new Executor();
oExecutor.microInterval = 1;
oExecutor.add(function(task) {
//alert("we are the world");
console.log((new Date()).toLocaleString())
task.setParam("love","MJ");
task.done();
}, 0);
oExecutor.sleep(2000);
oExecutor.add(function(task) {
console.log((new Date()).toLocaleString())
//alert("我又来了");
console.log(task.getParam("love"));
task.done();
}, 0);
oExecutor.exec();
}
[JavaScript]顺序的异步执行的更多相关文章
-
浅谈个人对客户端JavaScript同步、异步、执行顺序等概念的理解
一.同步和异步的概念. 同步:即按代码的顺序执行任务. 在下列代码中,按照同步概念,则是先打印1后打印2. console.log(1); console.log(2); 异步:即执行一个任务的同时执 ...
-
对Javascript异步执行的理解
简单的查看了下Javascript异步编程的代码.按照网上的说法,Javascript异步编程的核心就在于setTimeout.这个系统函数让我们将函数的执行放在了一个指定的新“线程”中.于是本来的顺 ...
-
关于JavaScript预编译和执行顺序以及函数引用类型的思考
昨晚在对项目中的一部分做模块化处理的时候,遇到了一个问题,一个重新定义的function对一个通用类中的function进行赋值覆盖的时候,失败了.问题抽象出来是这样的: <script > ...
-
js 异步执行顺序
参考文章: js 异步执行顺序 1.js的执行顺序,先同步后异步 2.异步中任务队列的执行顺序: 先微任务microtask队列,再宏任务macrotask队列 3.调用Promise 中的res ...
-
昼猫笔记 JavaScript -- 异步执行 | 定时器真的定时执行?
本篇主要内容:异步.定时器引发的思考 预计阅读时间:8分钟 了解 我们都知道在js中定时器有两种 setInterval() . setTimeout() setInterval() :按 ...
-
高性能JavaScript 加载和执行
前言 本章主要讲述如何加载脚本使得用户能有良好的用户体验,而核心内容就是JavaScript的异步加载.之前写过一篇不得不说的JavaScript异步加载,相似的内容就不多加描述,讲些不同的东西,主要 ...
-
javascript延迟加载及异步(defer和async)
一直以来写代码的时候的常用习惯就是吧所有的js文件直接加载在文档的head标签里面,在写js文件的时候有时候获取一些文件对象的时候为空对象,这是由于文档结构还没有加载完,但是js文件已经加载完.也就是 ...
-
怎么样加快JavaScript加载和执行效率
概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...
-
【转】JavaScript 的装载和执行
承接前面一篇文章<浏览器的渲染原理简介> ,本文来说下JavaScript的装载和执行. 通常来说,浏览器对于 JavaScript 的运行有两大特性: 1) 载入后马上执行 2) 执行时 ...
随机推荐
-
Navicat For Mysql快捷键
1.ctrl+q 打开查询窗口 2.ctrl+/ 注释sql语句 3.ctrl+shift +/ 解除注释 4.ctrl+r 运行查询窗 ...
-
JDK的版本历史
JDK1.5: 2004年发布----2006年结束 JDK1.6 2006年发布-----2010年结束 一看吓我一条,开始接触JDK都已经是2010年下半年了,可是那是学的就是1.5版本,知道工作 ...
-
[设计模式]<;<;设计模式之禅>;>;关于依赖倒置原则
依赖倒置原则(Dependence Inversion Principle,DIP)这个名字看着有点别扭,“依赖”还“倒置”,这到底是什么意思?依赖倒置原则的原始定义是 High level modu ...
-
iframe中调用父iframe中的方法
function getRootWin(){ var win = window; while (win != win.parent){ win = win ...
-
C语言学习书单
1.C Primer Plus(第六版)(中文版)豆瓣详情 C Primer Plus 最大的缺点可能就是内容太细,对于C语言讲解极为细致,但对于Sequence Point等内容并没有详细讲解. ...
-
Java中net.sf.json包关于JSON与对象互转的坑
在Web开发过程中离不开数据的交互,这就需要规定交互数据的相关格式,以便数据在客户端与服务器之间进行传递.数据的格式通常有2种:1.xml:2.JSON.通常来说都是使用JSON来传递数据.本文正是介 ...
-
Validation failed for object=&#39;employee&#39;. Error count: 1问题解决
2018-11-13 在表单提交时有时候会提示 Validation failed for object=’user’. Error count: 1,其中user是表的名字,Error count是 ...
-
Ionic3.x设置启动页与图标
由于手机有很多不同的尺寸与版本,所以图标尺寸也是大小不一,但是如果手动每一个尺寸都制作一个图标,那估计美工会吐血吧,不过幸好,ionic只需要一个图标就可以制作不同尺寸的图标. 添加一个ionic项目 ...
-
搞定 Kubernetes 基于flannel 的集群网络
.Docker网络模式 在讨论Kubernetes网络之前,让我们先来看一下Docker网络.Docker采用插件化的网络模式,默认提供bridge.host.none.overlay.maclan和 ...
-
ELK之filebate收集日志传递至Logstash
软件版本查看(版本最好一致) 安装过程不详叙 本次使用filebeat监控nginx日志(已经配置json输出)收集并且传递给Logstash进行处理 filebeat配置文件/etc/filebea ...