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处理程序中的性能问题

回答

相关问题