如何在javascript中實現異步

本篇文章給大家分享的是有關如何在javascript中實現異步，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

方法：1、利用setTimeout；2、利用setImmediate；3、利用requestAnimationFrame；4、通過監聽“new Image”加載狀態來實現；5、通過監聽script加載狀態來實現；6、利用Message等等。

原生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);

6、Message：html5新技能，通過監聽window.onmessage事件實現，然后postMessage發送消息，觸發onmessage事件實現異步

var asynByMessage = (function() {
        //異步隊列
        var queue = [];
        window.addEventListener('message', function (e) {
            //只響應asynByMessage的召喚
            if ( e.data === 'asynByMessage' ) {
                e.stopPropagation();
                if ( queue.length ) {
                    //執行并刪除隊列中的第一個
                    queue.shift()();
                }
            }
        }, true);
        return function( callback ) {
            //添加到隊列
            queue[ queue.length ] = callback;
            window.postMessage('asynByMessage', '*');
        };
    })();

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

7、Promise： ES6的新技能，具有異步性質

var asynByPromise = (function() {
        var promise = Promise.resolve({
                then : function( callback ) {
                    callback();
                }
            });
        return function( callback ) {
                    promise.then(function(){
                        callback();
                    })
                };
    })();
asynByPromise(function() {
    console.log(1);
});
console.log(2);

以上就是如何在javascript中實現異步，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。