en utilisant setTimeout dans la fonction qui ajoute des images

Question

J'ai des problèmes pour utiliser cette fonction append() dans un setTimeout. Si je supprime SetTimeout, toutes les images sont chargées. Une fois que je l'ai mis ici, il semble que les variables deviennent hors de portée ou invalides. Des suggestions sur ce que je fais mal ici?

// thumbs[] is an array with image sources. 

for (var imageIndex = 0; imageIndex < thumbs.length; imageIndex++) { 

    var im = thumbs[imageIndex]; 

    setTimeout(function(im){ 
     $("#a").append("<img class='images' src='" + im + "' />"); 
    },1000); 

} // end for 

Answer 1

Ne pas essayer de passer im au rappel setTimeout. Votre fonction anonyme peut lire im, car les fonctions ont accès à leur portée parent. Si vous essayez de le passer comme ça, ça ne marchera pas. setTimeout appellera le callback en interne, sans passer d'arguments. En réalité, vous créez une nouvelle variable locale non définie im à l'intérieur de la fonction anonyme et bloquez l'accès à la variable à partir de la portée externe. Donc, cela devrait fonctionner:

var im = thumbs[imageIndex]; 
setTimeout(function(){ 
    $("#a").append("<img class='images' src='" + im + "' />"); 
},1000); 

Cependant, votre code est à l'intérieur d'une boucle, et juste faire qu'à l'intérieur de la boucle ne suffit pas. Puisque les appels setTimeout sont asynchrones, quand ils sont exécutés im sera toujours la dernière valeur de votre boucle (thumbs.length). Vous pouvez éviter cela en créant une fermeture. La réponse de Sushil est un exemple de cela, donc je vais vous montrer un autre style:

for (var imageIndex = 0; imageIndex < thumbs.length; imageIndex++) { 
    var im = thumbs[imageIndex]; 
    setTimeout(createTimerCallback(im), 1000); 

} 

function createTimerCallback(im) { 
    return function(){ 
     $("#a").append("<img class='images' src='" + im + "' />"); 
    }; 
} 

Answer 2

Essayez ceci. Dans votre cas im à l'intérieur setTimeout est undefiend.

for (var imageIndex = 0; imageIndex < thumbs.length; imageIndex++) { 

    var im = thumbs[imageIndex]; 

    setTimeout(function(im){ 
     $("#a").append("<img class='image' src='" + im + "' />"); 
    },1000, im); 

} 

passage de paramètres IE DonT support dans setTimeout Essayez ceci si vous voulez que cela fonctionne sur tous les navigateurs

for (var imageIndex = 0; imageIndex < thumbs.length; imageIndex++) { 

     var im = thumbs[imageIndex]; 
     (function(im){ 
     setTimeout(function(){ 
      $("#a").append("<img class='image' src='" + im + "' />"); 
     },1000); 
})(im); 

    }