[JavaScript]顺序的异步执行

时间:2022-09-17 11:11:51

我们知道,在适用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]顺序的异步执行的更多相关文章

  1. 浅谈个人对客户端JavaScript同步、异步、执行顺序等概念的理解

    一.同步和异步的概念. 同步:即按代码的顺序执行任务. 在下列代码中,按照同步概念,则是先打印1后打印2. console.log(1); console.log(2); 异步:即执行一个任务的同时执 ...

  2. 对Javascript异步执行的理解

    简单的查看了下Javascript异步编程的代码.按照网上的说法,Javascript异步编程的核心就在于setTimeout.这个系统函数让我们将函数的执行放在了一个指定的新“线程”中.于是本来的顺 ...

  3. 关于JavaScript预编译和执行顺序以及函数引用类型的思考

    昨晚在对项目中的一部分做模块化处理的时候,遇到了一个问题,一个重新定义的function对一个通用类中的function进行赋值覆盖的时候,失败了.问题抽象出来是这样的: <script &gt ...

  4. js 异步执行顺序

    参考文章: js 异步执行顺序   1.js的执行顺序,先同步后异步 2.异步中任务队列的执行顺序: 先微任务microtask队列,再宏任务macrotask队列 3.调用Promise 中的res ...

  5. 昼猫笔记 JavaScript -- 异步执行 &vert; 定时器真的定时执行?

      本篇主要内容:异步.定时器引发的思考 预计阅读时间:8分钟 了解 我们都知道在js中定时器有两种  setInterval()  . setTimeout()   setInterval() :按 ...

  6. 高性能JavaScript 加载和执行

    前言 本章主要讲述如何加载脚本使得用户能有良好的用户体验,而核心内容就是JavaScript的异步加载.之前写过一篇不得不说的JavaScript异步加载,相似的内容就不多加描述,讲些不同的东西,主要 ...

  7. javascript延迟加载及异步&lpar;defer和async&rpar;

    一直以来写代码的时候的常用习惯就是吧所有的js文件直接加载在文档的head标签里面,在写js文件的时候有时候获取一些文件对象的时候为空对象,这是由于文档结构还没有加载完,但是js文件已经加载完.也就是 ...

  8. 怎么样加快JavaScript加载和执行效率

    概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...

  9. 【转】JavaScript 的装载和执行

    承接前面一篇文章<浏览器的渲染原理简介> ,本文来说下JavaScript的装载和执行. 通常来说,浏览器对于 JavaScript 的运行有两大特性: 1) 载入后马上执行 2) 执行时 ...

随机推荐

  1. Navicat For Mysql快捷键

    1.ctrl+q           打开查询窗口 2.ctrl+/            注释sql语句 3.ctrl+shift +/  解除注释 4.ctrl+r           运行查询窗 ...

  2. JDK的版本历史

    JDK1.5: 2004年发布----2006年结束 JDK1.6 2006年发布-----2010年结束 一看吓我一条,开始接触JDK都已经是2010年下半年了,可是那是学的就是1.5版本,知道工作 ...

  3. &lbrack;设计模式&rsqb;&lt&semi;&lt&semi;设计模式之禅&gt&semi;&gt&semi;关于依赖倒置原则

    依赖倒置原则(Dependence Inversion Principle,DIP)这个名字看着有点别扭,“依赖”还“倒置”,这到底是什么意思?依赖倒置原则的原始定义是 High level modu ...

  4. iframe中调用父iframe中的方法

    function getRootWin(){       var win = window;       while (win != win.parent){            win = win ...

  5. C语言学习书单

    1.C Primer Plus(第六版)(中文版)豆瓣详情 ​ C Primer Plus 最大的缺点可能就是内容太细,对于C语言讲解极为细致,但对于Sequence Point等内容并没有详细讲解. ...

  6. Java中net&period;sf&period;json包关于JSON与对象互转的坑

    在Web开发过程中离不开数据的交互,这就需要规定交互数据的相关格式,以便数据在客户端与服务器之间进行传递.数据的格式通常有2种:1.xml:2.JSON.通常来说都是使用JSON来传递数据.本文正是介 ...

  7. Validation failed for object&equals;&&num;39&semi;employee&&num;39&semi;&period; Error count&colon; 1问题解决

    2018-11-13 在表单提交时有时候会提示 Validation failed for object=’user’. Error count: 1,其中user是表的名字,Error count是 ...

  8. Ionic3&period;x设置启动页与图标

    由于手机有很多不同的尺寸与版本,所以图标尺寸也是大小不一,但是如果手动每一个尺寸都制作一个图标,那估计美工会吐血吧,不过幸好,ionic只需要一个图标就可以制作不同尺寸的图标. 添加一个ionic项目 ...

  9. 搞定 Kubernetes 基于flannel 的集群网络

    .Docker网络模式 在讨论Kubernetes网络之前,让我们先来看一下Docker网络.Docker采用插件化的网络模式,默认提供bridge.host.none.overlay.maclan和 ...

  10. ELK之filebate收集日志传递至Logstash

    软件版本查看(版本最好一致) 安装过程不详叙 本次使用filebeat监控nginx日志(已经配置json输出)收集并且传递给Logstash进行处理 filebeat配置文件/etc/filebea ...