Heim > Web-Frontend > js-Tutorial > Hauptteil

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

青灯夜游
Freigeben: 2021-06-07 17:04:48
Original
3096 Leute haben es durchsucht

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

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

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);
Nach dem Login kopieren

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

setImmediate(function(){
    console.log(1);
});
console.log(2);
Nach dem Login kopieren

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);
Nach dem Login kopieren

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);
Nach dem Login kopieren

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);
Nach dem Login kopieren

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);
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage