JavaScript onclick處理程序中的性能問題

我已經用java腳本編寫了一個遊戲，當它工作時，它對多次點擊響應緩慢。下面是我用來處理點擊的代碼的一個非常簡化的版本，如果您沒有足夠長時間，它仍然無法響應第二次點擊。這是我需要接受的東西嗎？還是有更快的方式爲下次點擊做好準備？JavaScript onclick處理程序中的性能問題

順便說一句，我附加這個函數使用從quirksmode recoding比賽的AddEvent。

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; 
    } 
}

活碼可在http://www.omega-link.com/index.php?content=testgame

來源

2009-05-19 Tom

我覺得你的問題是，第2點擊被註冊爲DblClick事件，而不是一個click事件。改變正在迅速發生，但第二次點擊被忽略，除非你等待。我建議更改爲mousedown或mouseup事件。

來源

2009-05-19 20:40:46

更改爲鼠標似乎已經成功了。謝謝。當然，現在我需要查找如何以跨平臺的方式移除處理程序，但這是次要的。 – Tom 2009-05-19 23:08:53

可以看出，我相信你的問題是改變DOM這是一個巨大的性能問題innerHTML的變化。

來源

2009-05-19 20:33:53

好吧，我已經嘗試了這兩個innerHTML和DOM方法。兩者似乎都以相同的速度作出迴應。第一次點擊響應時有一點延遲（塊得到高亮度），如果第二次點擊在第一次點擊之後不會太早出現，則第二次點擊很有效（我猜測在這裏進行調整，但是大約需要1/4秒）在正常的遊戲中，用戶可以點擊一個塊來突出顯示它，然後再次點擊刪除該塊。 – Tom 2009-05-19 20:39:09

您可以嘗試只更改類名，而不是刪除/添加div到DOM（這是innerHTML屬性的作用）。

喜歡的東西：

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; 
     } 
    } 
}

來源

2009-05-19 20:40:06

儘管它沒有解決我遇到的問題，但如果不需要刪除和重新創建，您的確會提出一個很好的觀點。 +1 – Tom 2009-09-23 05:47:35

是的，你可能需要比較的innerHTML反對使用document.createElement）性能（或甚至：

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

剖析你的代碼可能會有所幫助，你A/B各重構：

來源

2009-05-19 20:41:43 steamer25

一般來說是個好主意，所以+1。但是，我已經嘗試了兩種方法，並且幾乎沒有什麼區別。 – Tom 2009-05-19 23:11:03

JavaScript onclick處理程序中的性能問題

回答

相關問題