2017-09-29 1 views
4

Hier ist der Code:JavaScript foreach() Methode funktionieren anders in Chrome und 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); 
}); 

Zuerst habe ich es auf Chrome lief und bekommen das Ergebnis:

<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"> 

Aber wenn ich Schritt verwenden in Debugger oder auf Firefox laufen, ist das Ergebnis das gleiche wie ich dachte:

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

Vielleicht ist der bessere Weg, um die Erklärung zu setzen i n die ForEach-Funktion.

Ist das ein Fehler im Entwickler-Tool von Chrome?

+2

den Wert von Outerhtml prüfen, anstatt nur img anmelden es wird die richtige html haben, könnte es sein, weil das DOM ist nicht die Zeit, die zu aktualisieren alle korrekten Interna vor dem nächsten Protokollaufruf –

+0

@PatrickEvans Das erklärt nicht, warum der erste 'console.log (img)' -Aufruf '' vor dem Erreichen von '.forEach()' bei Chromium 60. – guest271314

+1

@ guest271314, könnte es da die ForEach-Iterationen die UI binden werden und je nach ihrem Code zum Zeitpunkt des Aufrufs console.log() keine Textdarstellung von img angenommen haben, und dies erst nach Abschluss der Schleife tun. –

Antwort

0

Ich glaube, dass console.log async auf Firefox handelt. Es ist nicht standardisiert, daher kann sich das Verhalten je nach Version oder Browser ändern. Es treten Asynchronprobleme auf, die wahrscheinlich mit dem Marshalling von Daten über Prozessgrenzen hinweg zusammenhängen.

Wenn Sie ein einfaches Objekt console.log und dann sofort etwas im Objekt ändern, zeigt die console.log() nicht immer den Wert.

Versuchen Sie img in eine Zeichenfolge, die unveränderlich ist, und dann drucken Sie es.

0

Habe gerade eine interessante Sache entdeckt. Wenn Sie die Seite mit geschlossener Konsole in Firefox aktualisieren (cmd + r), erhalten Sie dasselbe Ergebnis wie in Chrome. Öffnen Sie einfach Konsole nach Refresh;)

So sieht es aus wie ein Firefox Bug

Verwandte Themen