So implementieren Sie Asynchronität in Javascript

So implementieren Sie asynchrones JavaScript: 1. Verwenden Sie die setImmediate-Methode. 3. Verwenden Sie die requestAnimationFrame-Methode. 5. Überwachen Sie den Ladestatus des Skripts.

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

Javascript-Methoden zur Implementierung der asynchronen Implementierung:

1. setTimeout: Dies ist die einfachste

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

2. setImmediate: eine neue Funktion, die von IE10 hinzugefügt wurde und speziell zur Freigabe des UI-Threads verwendet wird. 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: Die asynchrone Implementierung 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 wird onerror jedoch 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 des Skript-Ladestatus

　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 im Format data:text/javascript 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);

Verwandte kostenlose Lernempfehlungen: Javascript (Video)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Asynchronität in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!