2013-12-17 14 views
6

Betrachten Sie das folgende HTML:SetTimeout - seltsame Verhalten

<html> 
    <head></head> 
    <body> 
     <input type="text" onblur="window.setTimeout('document.title += 2;', 0);" /> 
     <input type="button" onclick="document.title += 1" /> 
    </body> 
</html> 

[Demo with 0 delay, 100ms delay, 150ms delay]

Und die folgenden Schritte:

  • Benutzer gibt den Eingang (Fokus).
  • Benutzer klickt auf die Schaltfläche.

Nun wäre treten die Ereignisse auf der folgenden Reihenfolge:

  • Texteingabe Unschärfe Ereignis.
  • Schaltfläche klicken Ereignis.

Testing dies auf allen erreichbaren Browser erhalte ich:

document.title = '21' //Expected behavior 

Aber! Bei der Herstellung Browser (Windows XP + IE 7), erhalte ich:

document.title = '12' //Unexpected behavior 

Ich habe auch versucht, es in IE 7-Modus auf meinem lokalen Rechner (IE 10) zu simulieren, ist es nicht tho reproduzieren konnte.

Dies ist offensichtlich ein vereinfachtes Beispiel für das Problem, das ich habe. Ansonsten könnte ich einfach das setTimeout loswerden.

Im tatsächlichen Szenario wird der setTimeout-Aufruf tatsächlich von einer Drittanbieter-Skriptbibliothek (ASP.NET Dev Express Components) ausgeführt.

Abgesehen von der tatsächlichen Lösung für dieses Problem (was ich denke, dass ich damit umgehen kann), welche Erklärung könnte auf dieses Verhalten angewendet werden?

Update:

den Ausdruck Mit new Date().getTime() die Zeit eines jeden Schrittes durch den Browser ausgeführt zu bekommen. Es geschieht wie folgt:

1387369361417 //document.title += 1 
1387369361433 //document.title += 2 
+1

Vielleicht löst IE7 das Klickereignis vor dem Unschärfeereignis aus? * "In diesem Fall kann das Button-Click-Ereignis nicht vor der Unschärfe-Funktion stattfinden." * Wie sicher bist du dabei? –

+1

@Felix Kling: Nein, ohne setTimeout, es wird tatsächlich als 'document.title = '21'' –

+0

ausgewertet Wenn Sie nicht die Funktion window.setTimeOut verwenden und Sie schreiben' onblur = "document.title + = 2; "', was ist die Ausgabe? – ProGM

Antwort

1

Zwei Möglichkeiten:

  1. Ihr Klick (mousedown- + mouseup) wird Finishing vor Mindest Timeout-Zeit des IE7.
  2. Der Mousedown-Status blockiert Skripte. Ereignisse müssen warten, bis andere Skripts und Benutzerinteraktionen abgeschlossen sind, bevor sie ausgelöst werden. Und angesichts der Geschichte von Skript-UI-Seltsamkeit/Schrecklichkeit im IE würde ich wetten, dass der Mousedown "eine Benutzerinteraktion beginnt" und das Mouesup "die Benutzerinteraktion beendet". Legen Sie diese bis in IE7:

    <input type="text" onblur="window.setTimeout('output(2));', 0); output(3);" /> 
    <input type="button" onclick="output(1);" /> 
    

    http://jsfiddle.net/sMcE3/

    ... und nachdem Sie konzentrieren würde() 'd auf das Textfeld ein, klicken Sie auf diese Schaltfläche echte langsam wie. Ich schätze, Sie sehen 312. (Im Gegensatz zu 321, die jeder halbwegs anständige Browser zeigt.)

+0

Wenn ich sehr langsam darauf klicke, bekomme ich 321. Es scheint, als würde das Unschärfe-Ereignis vor dem Mouse-Up passieren. Und das Klick-Ereignis würde erst nach MouseUp ausgeführt werden. –

+0

Ah. Das klingt mehr wie Möglichkeit # 1 dann. – svidgen