我们知道,在适用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异步执行的理解

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

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

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

  3. 高性能JavaScript 加载和执行

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

  4. javascript延迟加载及异步(defer和async)

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

  5. ajax同步、异步执行简单理解与证明

    此理解范例代码来自前几篇随笔! 首先我们来先了解下AJAX: Ajax:全称“Asynchronous Javascript and XML”(异步Javascript和XML),他是由Javascr ...

  6. javascript从定义到执行 js引擎 闭包

    javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境 栈.全局对象.执行环境.变量对象.活动对象.作用域和作用域链 ...

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

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

  8. javascript中的异步 macrotask 和 microtask 简介

    javascript中的异步 macrotask 和 microtask 简介 什么是macrotask?什么是microtask?在理解什么是macrotask?什么是microtask之前,我们先 ...

  9. Go同步和异步执行多个任务封装

    同步执行类RunnerAsync 支持返回超时检测,系统中断检测 错误常量定义 //超时错误 var ErrTimeout = errors.New("received timeout&qu ...

随机推荐

  1. Ubuntu(Linux) + mono + xsp4 + nginx +asp.net MVC3 部署

    折腾了一下,尝试用Linux,部署mvc3. 分别用过 centos 和 ubuntu ,用ubuntu是比较容易部署的. 操作步骤如下: 一.终端分别如下操作 sudo su ->输入密码 a ...

  2. 使用命令 gradle uploadArchives 的异常: Unable to initialize POM pom-default.xml: Failed to validate POM for project

    在使用:gradle uploadArchives 命令对项目进行上传maven时,常常遇到如下报错: 这时候要仔细的检查一下build.gradle文件中的dependencies内容,很多时候是由 ...

  3. Android基础总结(九)

    多媒体概念(了解) 文字.图片.音频.视频 计算机图片大小的计算(掌握) 图片大小 = 图片的总像素 * 每个像素占用的大小 单色图:每个像素占用1/8个字节 16色图:每个像素占用1/2个字节 25 ...

  4. iOS 大文件断点下载

    iOS 在下载大文件的时候,可能会因为网络或者人为等原因,使得下载中断,那么如何能够进行断点下载呢? // resumeData的文件路径 #define XMGResumeDataFile [[NS ...

  5. [原创]cocos2d-x研习录-第三阶 背景音乐和音效

    在游戏中,音效是一个不可或缺的部分,它可以为我们的游戏增加效果.音效在游戏中一般分为长时间的背景音乐和短促的特效音乐.Cocos2D-x支持多种常见音乐格式(mp3.wav等). Cocos2D-x提 ...

  6. myEclipse中改了项目名,出现的问题 和 错误java.io.IOException: tmpFile.renameTo(classFile) failed

    今天遇到一个很头疼的问题,建的一个新项目,后来因为一些原因把项目名改了,之后就做了一些业务,但运行时总是没有反应,后来在myEclipse工作空间下的webapps文件中发现, 部署的文件名和项目名称 ...

  7. 理解Linux系统负荷

    一.查看系统负荷 如果你的电脑很慢,你或许想查看一下,它的工作量是否太大了. 在Linux系统中,我们一般使用uptime命令查看(w命令和top命令也行).(另外,它们在苹果公司的Mac电脑上也适用 ...

  8. CSS3学习笔记--transform中的Matrix(矩阵)

    transform: matrix(a,b,c,d,e,f) ,如下图矩阵所示,任意点(x,y,1)经过matrix变化为(ax+cy+e,bx+dy+f,1),由此可以知道,matrix参数与tra ...

  9. 网站提供的下载IE8很慢 由于Microsoft 联机服务暂时不可用,SmartScreen筛选器无法检查此网站。

    在内网环境中,网站系统提供了一个下载功能,用ie8下载特别慢,一个20kb的文件,下载要10分钟,但是在其他环境中是很快的,试了半天,原来是:由于Microsoft 联机服务暂时不可用,SmartSc ...

  10. java比.net优美的一个小地方

    用了四年的.net,今年转做java,内心一直吐槽java的烦琐,今天发现了一个java值得我为之点赞的地方 java的枚举居然可以这么玩,废话不多,上demo package com.sunline ...