JavaScriptで非同期を実装するにはどのような方法がありますか?-jsチュートリアル-php.cn

JavaScriptで非同期を実装するにはどのような方法がありますか?

青灯夜游

リリース： 2021-06-07 17:04:48

オリジナル

2959 人が閲覧しました

方法: 1. setTimeoutを使用する; 2. setImmediateを使用する; 3. requestAnimationFrameを使用する; 4. 「新しい画像」の読み込み状況を監視することで実現; 5. スクリプトの読み込み状況を監視することで実現; 6. Messageを使用する等

JavaScriptで非同期を実装するにはどのような方法がありますか?

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.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 をサポートしていません。新しい画像の読み込みステータスを監視します。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. スクリプトの読み込みステータスを監視します

原理はnew Imageと同じで、data:text/javascriptスクリプトを生成し、その読み込み状況を監視することで非同期に実装します。

一部のブラウザーは、data:text/javascript 形式のデータを含むスクリプトをサポートしていませんが、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. メッセージ: 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. お約束: 非同期性を備えた 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で非同期を実装するにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。