Leistungsprobleme in Javascript onclick Handler

Ich habe ein Spiel in Java-Skript geschrieben und während es funktioniert, reagiert es langsam auf mehrere Klicks. Unten ist eine sehr vereinfachte Version des Codes, den ich verwende, um Klicks zu behandeln, und es ist immer noch nicht möglich, auf einen zweiten Klick von 2 zu reagieren, wenn Sie nicht lange genug warten. Ist das etwas, das ich einfach akzeptieren muss oder gibt es einen schnelleren Weg, um für den nächsten Klick bereit zu sein?Leistungsprobleme in Javascript onclick Handler

BTW, ich füge diese Funktion mit AddEvent aus dem quirksmode Recoding Contest.

var selected = false; 
var z = null; 
function handleClicks(evt) { 
    evt = (evt)?evt:((window.event)?window.event:null); 
    if (selected) { 
     z.innerHTML = '<div class="rowbox a">a</div>'; 
     selected = false; 
    } else { 
     z.innerHTML = '<div class="rowbox selecteda">a</div>'; 
     selected = true; 
    } 
}

Der Live-Code kann bei http://www.omega-link.com/index.php?content=testgame

Quelle

2009-05-19 Tom

Ich denke, Ihr Problem ist, dass der zweite Klick als dblclick Ereignis registriert, nicht als Klick-Ereignis. Die Änderung erfolgt schnell, aber der zweite Klick wird ignoriert, es sei denn, Sie warten. Ich würde vorschlagen, entweder zum mousedown- oder mouseup-Ereignis zu wechseln.

Quelle

2009-05-19 20:40:46

Der Wechsel zur Maus scheint den Trick geschafft zu haben. Vielen Dank. Natürlich muss ich nun nachsehen, wie man den Handler plattformübergreifend entfernt, aber das ist unbedeutend. – Tom

Ich glaube, das Problem die Veränderung der innerHTML, die das DOM, die ein enormes Performance-Problem ist, ändert, ist zu sehen.

Quelle

2009-05-19 20:33:53

Ok, ich habe das sowohl mit innerHTML als auch mit DOM versucht. Beide scheinen mit der gleichen Geschwindigkeit zu reagieren. Der erste Klick reagiert mit etwas Verzögerung (der Block wird hervorgehoben) und der zweite Klick funktioniert gut, wenn er nicht zu früh nach dem ersten auftritt (ich rate beim Timmen hier, aber etwa 1/4 Sekunde) Im normalen Spiel würde ein Benutzer auf einen Block klicken, um ihn zu markieren, und dann erneut klicken, um den Block zu entfernen. – Tom

Sie könnten versuchen, nur den Klassennamen zu ändern, anstatt ein div zum DOM hinzuzufügen/hinzuzufügen (was die innerHTML-Eigenschaft tut).

Etwas wie:

var selected = false; 
var z = null; 

function handleClicks(evt) 
{ 
    var tmp; 

    if(z == null) 
     return; 

    evt = (evt)?evt:((window.event)?window.event:null); 
    tmp = z.firstChild; 
    while((tmp != null) && (tmp.tagName != 'DIV')) 
     tmp = tmp.firstChild; 
    if(tmp != null) 
    { 
     if (selected) 
     { 
     tmp.className = "rowbox a"; 
     selected = false; 
     } else 
     { 
     tmp.className = "rowbox selecteda"; 
     selected = true; 
     } 
    } 
}

Quelle

2009-05-19 20:40:06

Während es nicht das Problem anspricht, das ich hatte, machen Sie einen ausgezeichneten Punkt darüber, nicht zu löschen und neu zu erstellen, wenn ich nicht muss. +1 – Tom

Ja, Sie möchten die Leistung von innerHTML- gegen document.createElement() oder sogar vergleichen:

el.style.display = 'block' // turn off display: none.

Profilierungs Code kann ein/B verschiedene Refactorings wie Sie nützlich sein:

Quelle

2009-05-19 20:41:43 steamer25

Im Allgemeinen eine gute Idee, also die +1. Allerdings hatte ich beide Wege ausprobiert und es gab kaum Unterschiede. – Tom

Leistungsprobleme in Javascript onclick Handler

Antwort

Verwandte Themen