JavaScriptで非同期を実装する方法

非同期 JavaScript の実装方法: 1. setTimeout メソッドを使用する; 2. setImmediate メソッドを使用する; 3. requestAnimationFrame メソッドを使用する; 4. 新しい画像の読み込みステータスを監視する; 5. スクリプトの読み込みステータス メソッドを監視する。

このチュートリアルの動作環境: Windows 7 システム、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);

関連する無料学習の推奨事項: javascript(ビデオ)

以上がJavaScriptで非同期を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。