Quels sont les moyens d’implémenter l’asynchronisme en javascript ?

Méthode : 1. Utilisez setTimeout ; 2. Utilisez setImmediate ; 3. Utilisez requestAnimationFrame ; 4. Réalisez en surveillant l'état de chargement de la "nouvelle image" ; etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

La manière dont le javascript natif implémente l'implémentation asynchrone :

1. setTimeout : c'est le plus simple

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

2. setImmediate : une nouvelle fonction ajoutée par IE10, spécifiquement utilisée pour libérer le thread ui. IE10 et versions antérieures et les autres navigateurs ne prennent pas en charge

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

3. requestAnimationFrame : un nouveau produit dans l'ère HTML5/CSS3, spécialement utilisé pour l'animation. Les navigateurs de bas niveau ne prennent pas en charge

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. Surveillez le nouvel état de chargement de l'image : en chargeant une image au format data:image data et en écoutant le état de chargement pour obtenir un état asynchrone.

Bien que certains navigateurs ne prennent pas en charge le format de données d'image data:image, ils peuvent toujours déclencher leur état d'erreur pour réaliser une implémentation asynchrone. Cependant, IE8 et versions antérieures ne prennent pas en charge les images. au format de données data:image. , onerror est exécuté de manière synchrone

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. Surveiller l'état de chargement du script

Le principe est le même que celui de new Image, générer un script data:text/javascript et surveiller son état de chargement pour l'implémenter de manière asynchrone.

Bien que certains navigateurs ne prennent pas en charge les scripts avec des données au format data : texte/javascript, ils peuvent toujours déclencher leurs événements onerror et onreadystatechange pour réaliser une implémentation asynchrone.

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. Message : nouvelle compétence de html5, implémentée en écoutant l'événement window.onmessage, puis postMessage envoie le message, déclenchant l'événement onmessage pour obtenir un

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. Promesse : la nouvelle compétence d'ES6, de nature asynchrone

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

Pour plus de connaissances liées à la programmation, veuillez visitez :

Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!