Welche Möglichkeiten gibt es, Asynchronität in Javascript zu implementieren?

Methoden: 1. SetTimeout verwenden; 3. RequestAnimationFrame verwenden; 4. Realisieren, indem der Ladestatus des Skripts überwacht wird;

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Möglichkeiten zur asynchronen Implementierung in nativem Javascript:

1. Dies ist die einfachste

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

2 Faden. IE10 und niedriger sowie andere Browser unterstützen

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

3 nicht. requestAnimationFrame: ein neues Produkt in der HTML5/CSS3-Ära, das speziell für Animationen verwendet wird. Low-Level-Browser unterstützen nicht

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. Überwachen Sie den Ladestatus neuer Bilder: Asynchron wird erreicht, indem ein Bild im Datenformat „data:image“ geladen und der Ladestatus überwacht wird.

Obwohl einige Browser das Bilddatenformat data:image nicht unterstützen, können sie dennoch ihren onerror-Status auslösen, um eine asynchrone Implementierung zu erreichen. Für IE8 und niedriger gilt jedoch onerror für Bilder im Datenformat data:image Synchron ausgeführt

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. Überwachen Sie den Ladestatus des Skripts

　Das Prinzip ist das gleiche wie bei einem neuen Bild und überwacht seinen Ladestatus, um eine asynchrone Implementierung zu erreichen.

Obwohl einige Browser keine Skripte mit Daten im Text-/Javascript-Format unterstützen, können sie dennoch ihre Ereignisse onerror und onreadystatechange auslösen, um eine asynchrone Implementierung zu erreichen.

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 Nachricht: Eine neue Fähigkeit in HTML5, implementiert durch Abhören des window.onmessage-Ereignisses und anschließendes Senden einer Nachricht, die das onmessage-Ereignis auslöst, um asynchrones7 zu erreichen : Eine neue Fähigkeit in ES6 mit asynchronen Eigenschaften

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

Weitere programmierbezogene Kenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, Asynchronität in Javascript zu implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!