2017-09-29 3 views
4

Voici le code:JavaScript travail Méthode foreach() différemment dans Chrome et Firefox

var img = document.createElement('img'); 
//debugger; 
console.log(img); 
[1, 2].forEach(function (item) { 

    console.log(img); 

    img.removeAttribute("src") 

    console.log(img); 

    var img_src = document.createAttribute("src"); 
    img_src.value = '/test?id=' + item; 
    img.setAttributeNode(img_src); 

    console.log(img); 
}); 

Au début, je l'ai couru sur Chrome et obtenir le résultat:

<img src="/test?id=2"> 
<img src="/test?id=2"> 
<img src="/test?id=2"> 
<img src="/test?id=2"> 
<img src="/test?id=2"> 
<img src="/test?id=2"> 
<img src="/test?id=2"> 

Mais quand je l'utilise pas dans débogueur ou exécuter sur Firefox, le résultat est le même que je pensais:

<img> 
<img> 
<img> 
<img src="/test?id=1"> 
<img src="/test?id=1"> 
<img> 
<img src="/test?id=2"> 

Peut-être la meilleure façon est de mettre la déclaration i n la fonction forEach.

Est-ce un bug dans l'outil de développement de Chrome?

+2

Vérifiez la valeur de outerHTML au lieu de simplement vous connecter img il aura le code html approprié, il peut être parce que le DOM est de ne pas avoir le temps de mettre à jour tous les internes corrects avant le prochain appel de journal –

+0

@PatrickEvans Cela n'explique pas pourquoi le premier 'console.log (img)' appelle l'appel '' avant d'atteindre '.forEach()' à Chromium 60. – guest271314

+1

@ guest271314, il pourrait puisque les itérations forEach vont lier l'interface utilisateur et pourraient, selon leur code, ne pas avoir pris une représentation textuelle de img au moment de l'appel de console.log(), et ne le feront qu'après que la boucle soit terminée –

Répondre

0

Je pense que console.log agit async sur Firefox. Il n'est pas standardisé, donc le comportement peut changer en fonction de la version ou du navigateur, il a quelques problèmes asynchrones probablement liés au marshaling des données à travers les limites du processus.

Si vous consolez un objet simple et que vous modifiez immédiatement quelque chose dans l'objet, le fichier console.log() n'affiche pas toujours la valeur.

Essayez de mettre img dans une chaîne, qui est immuable, puis imprimez-le.

0

Juste découvert une chose plus intéressante. Si vous actualisez la page (cmd + r) avec une console fermée dans Firefox, vous obtiendrez le même résultat que dans Chrome. Juste console ouverte après rafraîchissement;)

il ressemble un bug Firefox