javascript如何實現異步

javascript實作非同步的方法：1、使用setTimeout方法；2、使用setImmediate 方法；3、使用requestAnimationFrame方法；4、監聽new Image載入狀態；5、監聽script載入狀態方法。

本教學操作環境：windows7系統、javascript1.8.5版，DELL G3電腦。

javascript實作非同步的方法：

1、setTimeout：這個是最簡單的

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

2 、setImmediate ：IE10新增的功能，專門用於解放ui線程。 IE10以下及其他瀏覽器不支援

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

3、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);

4、監聽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);

5、監聽script載入狀態

　　原理同new Image是一樣的，產生一個data:text/javascript的script，並監聽其載入狀態實作異步。

　　儘管部分瀏覽器不支援data:text/javascript格式資料的script，但仍可觸發其onerror、onreadystatechange事件實現非同步。

var asynByScript = (function() {
    var _document = document,
        _body = _document.body,
        _src = "data:text/javascript,",
        //异步队列
        queue = [];
    return function( callback ) {
            var script = _document.createElement("script");
            script.src  = _src;
            //添加到队列
            queue[ queue.length ] = callback;
            script.onload = script.onerror = script.onreadystatechange = function () {
                script.onload = script.onerror = script.onreadystatechange = null;
                _body.removeChild( script );
                script = null;
                //执行并删除队列中的第一个
                queue.shift()();
            };
            _body.appendChild( script );
        }
    })();
asynByScript( function() {
    console.log(1);
} );
console.log(2);

相關免費學習推薦：javascript（影片）

以上是javascript如何實現異步的詳細內容。更多資訊請關注PHP中文網其他相關文章！