Comment implémenter l'asynchrone en javascript

Comment implémenter du JavaScript asynchrone : 1. Utilisez la méthode setTimeout ; 2. Utilisez la méthode setImmediate ; 3. Utilisez la méthode requestAnimationFrame ; 4. Surveillez l'état de chargement de la nouvelle image ; .

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

Méthodes Javascript pour implémenter une 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 de données data:image et en écoutant l'état de chargement, l'implémentation asynchrone est atteint.

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 obtenir une implémentation asynchrone. Cependant, pour IE8 et versions antérieures, pour les images dans data:image data. format, 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érez un script data:text/javascript et surveillez. son état de chargement pour réaliser une implémentation asynchrone.

Bien que certains navigateurs ne prennent pas en charge les scripts au format data:text/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);

Recommandations d'apprentissage gratuites associées : javascript(vidéo)

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!