仓库源文，站点原文

title: JavaScript异步编程原理 categories:

• JavaScript
• 前端杂烩 tags:
• tech
• cnblogs
• 异步 warning: true date: 2014-01-05 11:01:00 fromUrl: http://www.cnblogs.com/hustskyking/archive/2014/01/05/javascript-asynchronous-programming.html from: 博客园

A: 嘿，哥们儿，快点！
B: 我要三分钟，你先等着，完了叫你~
A: 好的，记得叫我啊~ 你（C）也等着吧，完了叫你~
C: 嗯！
...

/**
* @author Barret Lee
* @email barret.china@gmail.com
* @description 事件队列管理，含延时
*/
var Q = {
    // 保存队列信息
    a: [],
    // 添加到队列 queue
    q: function(d){
        // 添加到队列如果不是函数或者数字则不处理
        if(!/function|number/.test(typeof d)) return;

        Q.a.push(d);
        // 返回对自身的引用
        return Q;
    },
    // 执行队列 dequeue
    d: function(){
        var s = Q.a.shift();
        // 如果已经到了队列尽头则返回
        if(!s) return;

        // 如果是函数，直接执行，然后继续 dequeue
        if(typeof s === "function") {
            s(), Q.d();
            return;
        }

        // 如果是数字，该数字作为延迟时间，延迟 dequeue
        setTimeout(function(){
            Q.d();
        }, s);
    }
};

// 进程记录函数
function record(s){
    var div = document.createElement("div");
    div.innerHTML = s;
    console.log(s);
    document.body.appendChild(div);
}

Q
.q(function(){
    record("0 <i>3s 之后搞定，0 把 1 叫进来</i>");
})
.q(3000)  // 延时 3s
.q(function(){
    record("1 <i>2s 之后搞定，1 把 2 叫进来</i>");
})
.q(2000)  // 延时 2s
.q(function(){
    record("2 <span>后面没人了，OK，厕所关门~</span>");
})
.d();     // 执行队列

/**
* @author Barret Lee
* @email barret.china@gmail.com
* @description 事件队列管理，含延时
*/
var Q = {
    // 保存队列信息
    a: [],
    // 添加到队列 queue
    q: function(d){
        // 添加到队列如果不是函数或者数字则不处理
        if(!/function|number/.test(typeof d)) return;

        Q.a.push(d);
        // 返回对自身的引用
        return Q;
    },
    // 执行队列 dequeue
    d: function(){
        var s = Q.a.shift();
        // 如果已经到了队列尽头则返回
        if(!s) return;

        // 如果是函数，直接执行，然后继续 dequeue
        if(typeof s === "function") {
            s(), Q.d();
            return;
        }

        // 如果是数字，该数字作为延迟时间，延迟 dequeue
        setTimeout(function(){
             Q.d();
        }, s);
    }
};

function record(s){
    var div = document.createElement("div");
    div.innerHTML = s;
    console.log(s);
    document.body.appendChild(div);
}
Q
.q(function(){
    record("0 <i>3s 之后搞定，0 把 1 叫进来</i>");
})
.q(3000)
.q(function(){
    record("1 <i>2s 之后搞定，1 把 2 叫进来</i>");
})
.q(2000)
.q(function(){
    record("2 <span>后面没人了，OK，厕所关门~</span>");
})
.d();

//事件队列管理，含延时

var d = new Date, count = 0, f, timer;
timer = setInterval(f = function (){
    if(new Date - d > 1000)
        clearInterval(timer), console.log(count);
    count++;
}, 0);

var d = new Date, count = 0;
while(true) {
    if(new Date - d > 1000) {
        console.log(count);
        break;
    }
    count++;
}

5. Let timeout be the second method argument, or zero if the argument was omitted.
如果 timeout 参数没有写，默认为 0
7. If nesting level is greater than 5, and timeout is less than 4, then increase timeout to 4.
如果嵌套的层次大于 5 ，并且 timeout 设置的数值小于 4 则直接取 4.

//视浏览器情况采用最快的异步回调
var BrowserMutationObserver = window.MutationObserver || window.WebKitMutationObserver
if (BrowserMutationObserver) { //chrome18+, safari6+, firefox14+,ie11+,opera15
    avalon.nextTick = function(callback) { //2-3ms
        var input = DOC.createElement("input")
        var observer = new BrowserMutationObserver(function(mutations) {
            mutations.forEach(function() {
                callback()
            })
        })
        observer.observe(input, {
            attributes: true
        })
        input.setAttribute("value", Math.random())
    }
} else if (window.VBArray) {
//IE下这个通常只要1ms,而且没有副作用，不会发现请求，
//setImmediate如果只执行一次，与setTimeout一样要140ms上下
    avalon.nextTick = function(callback) {
        var node = DOC.createElement("script")
        node.onreadystatechange = function() {
            callback() //在interactive阶段就触发
            node.onreadystatechange = null
            root.removeChild(node)
            node = null
        }
        root.appendChild(node)
    }
} else {
    avalon.nextTick = function(callback) {
        setTimeout(callback, 0)
    }
}

var d = new Date;
setTimeout(function(){
    console.log("show me after 1s, but you konw:" + (new Date - d));
}, 1000);
while(1) if(new Date - d > 2000) break;

try{
    setTimeout(function(){
        throw new Error("我不希望这个错误出现！")
    }, 1000);
} catch(e){
    console.log(e.message);
}

var xhr = new XMLHttpRequest();
xhr.open('GET', '/', true);
xhr.send();
xhr.onreadystatechange = function(){
    console.log(xhr.status);
}

while(1) {
    if(xhr.status === "complete") {
        // dosomething();
        break;
    }
}

step1(function(res1){
    step2(function(res2){
        step3(function(res3){
            //...
        });
    });
});

E.on("evt", g);
function f(){
    setTimeout(function(){
        E.trigger("evt");
    })
}

E.subscribe("evt", g);
function f(){
    setTimeout(function () {
　　    // f的任务代码
　　    E.publish("evt");
    }, 1000);
}

<script type="text/javascript">
    throw new Error("error");
    console.log("show me"); // 并没有打印出来
</script>
<script type="text/javascript">
    console.log("show me"); // 打印出来了
</script>

window.onerror = function(msg, url, line){
    console.log(msg, url, line);
    // 必须返回 true，否则 Error 还是会触发阻塞程序
    return true;
}

setTimeout(function(){
    throw new Error("error");
    // console：
    //Uncaught Error: error path/to/ie6bug.html 99  
}, 50);

window.onerror = function(msg, url, line){
    // 截断 "Uncaught Error: error"，获取错误类型
    var type = msg.slice(16);
    switch(type){
        case "TooLarge":
            console.log("The number is too large");
        case "TooSmall":
            console.log("The number is too Small");
        case "TooUgly":
            console.log("That's Barret Lee~");
        // 如果不是我们预定义的错误类型，则反馈给后台监控
        default:
            $ && $.post && $.post({
                "msg": msg,
                "url": url,
                "line": line
            })
    }
    // 记得这里要返回 true，否则错误阻断程序。
    return true;
}

setTimeout(function(){
    if( something )  throw new Error("TooUgly");
    // console：
    //That's Barret Lee~ 
}, 50);

var worker = new Worker("./outer.js");
worker.addEventListener("message", function(e){
    console.log(e.message);
});
worker.postMessage("data one");
worker.postMessage("data two");

// outer.js
self.addEventListener("message", function(e){
    self.postMessage(e.message);
});

importScript("a.js", "b.js", "c.js");

<input id="inp"><input type="button" id="btn" value="发送">
<script type="text/javascript">
    var sw = new SharedWorder("./outer.js");
    // 绑定事件
    sw.port.onmessage = function(e){
        console.log(e.data);
    };
    btn.onclick = function(){
        sw.port.postMessage(inp.value);
        inp.value = "";
    };
    // 创建连接，开始监听
    sw.port.start();
</script>

// outer.js
var pool = [];
onconnect = function(e) {
    // 把连接的页面放入连接池
    pool.push(e.ports[0]);
    // 收到信息立即广播
    e.ports[0].onmessage = function(e){
        for(var i = 0;i < pool.length; i++)
            // 广播信息
            pool[i].postMessage(e.data);
    };
};

fs.readdir(source, function(err, files) {
  if (err) {
    console.log('Error finding files: ' + err)
  } else {
    files.forEach(function(filename, fileIndex) {
      console.log(filename)
      gm(source + filename).size(function(err, values) {
        if (err) {
          console.log('Error identifying file size: ' + err)
        } else {
          console.log(filename + ' : ' + values)
          aspect = (values.width / values.height)
          widths.forEach(function(width, widthIndex) {
            height = Math.round(width / aspect)
            console.log('resizing ' + filename + 'to ' + height + 'x' + height)
            this.resize(width, height).write(destination + 'w' + width + '_' + filename, function(err) {
              if (err) console.log('Error writing file: ' + err)
            })
          }.bind(this))
        }
      })
    })
  }
})

<p>是不是有种想吐的感觉，一层一层的嵌套，虽说这种嵌套十分正常，倘若每段代码都是这样的呈现，相信二次开发者一定会累死！关于如何解耦我就不细说了，可以回头看看上面那篇回调地狱的文章。</p>

<p>ECMAScript 6中有一个 Generator 对象，过段时间会对 ES6 中的新知识进行一一的探讨，这里不多说了，有兴趣的同学可以看看 H-Jin 写的一篇文章<a href="http://huangj.in/765" target="_blank">使用 (Generator) 生成器解决 JavaScript 回调嵌套问题</a>，使用 yield 关键词和 Generator 把嵌套给\拉直"了，这种方式就像是 chrome 的 DevTool 中使用断点一般，用起来特别舒服。</p>

<h3>五、小结</h3>

<p>本文提到了异步编程的相关概念和使用中会遇到的问题，在写文章之前做了三天的调研，不过还是有很多点没说全，下次对异步编程有了更深入的理解再来谈一谈。</p>

<h3>六、参考资料</h3>