原生javascript实现异步的7种方式

原生的javascript 实现异步的方式其实远远不至7种，
大可以分3类，
延迟类型：setTimeout（setInterval也是可以的）、requestAnimationFrame、setImmediate（IE10及以上）
监听事件实现的类型：监听new Image加载状态、监听script加载状态、监听iframe加载状态、Message
带有异步功能类型 Promise、ajax( XMLHttpRequest、ActiveXObject)、Worker；
考虑到
1.iframe 效率过慢；
2.ajax 在ie下一定要加载真实的文件才能触发open及send；
3.Worker 虽然具有异步特性，但它属于多线程的范畴，需要将主要的算法写在单独的js文件中才能完整体现其优点，若单单为了异步化而使用的话太浪费了。
所有这3种方式就不列出。

一、实现异步的方式

1.setTimeout
2.setImmediate
3.requestAnimationFrame
4.监听new Image加载状态
5.监听script加载状态
6.Message
7.Promise


setTimeout

这个是最简单的

setTimeout( function() {
   
    console.log(1);
});
console.log(2);

setImmediate

IE10添加的新功能，专门用于解放ui线程。IE10以下及其他浏览器不支持

setImmediate(function(){
   
    console.log(1);
});
console.log(2);

requestAnimationFrame

HTML5/CSS3时代新产物，专门用于动画。低级浏览器不支持

var asynByAniFrame = (function(){
   
    var _window = window,
    frame = _window.requestAnimationFrame
            || _window.webkitRequestAnimationFrame
            || _window.mozRequestAnimationFrame
            || _window.oRequestAnimationFrame
            || _window.msRequestAnimationFrame;
    return function( callback ) { frame( callback ) };
})();

asynByAniFrame(function(){
   
    console.log(1);
})
console.log(2);

监听new Image加载状态实现

通过加载一个data:image数据格式的图片，并监听器加载状态实现异步。

尽管部分浏览器不支持data:image图片数据格式，但仍然可以触发其onerror状态实现异步，但IE8及以下对data:image数据格式的图片，onerror为同步执行

function asynByImg( callback ) {
   
    var img = new Image();
    img.onload = img.onerror = img.onreadystatechange = function() {
   
        img = img.onload = img.onerror = img.onreadystatechange = null;
        callback(); 
    }
    img.src = "data:image/png,";
}
asynByImg(function(){
   
    console.log(1);
});
console.log(2);

监听script加载状态实现

原理同new Image是一样的，生成一个data:text/javascript的script，并监听其加载状态实现异步。

尽管部分浏览器不支持data:text/javascript格式数据的script，但仍然可以触发其onerror、onreadystatechange事件实现异步。

var asynByScript = (function() {