Question

我用java脚本编写了一个游戏，虽然它有效，但它对多次点击的反应很慢。下面是我用来处理点击的代码的一个非常简化的版本，如果你没有等待足够长的话，它仍然无法响应第二次点击2。这是我需要接受的东西，还是有更快的方法为下次点击做好准备？

顺便说一句，我使用quirksmode重新编码竞赛中的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

看到实时代码

Answer 1

您可以尝试仅更改类名而不是删除/添加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;
      }
    }
}

Answer 2

我认为你的问题是第二次点击是注册为dblclick事件，而不是点击事件。更改很快发生，但除非您等待，否则将忽略第二次单击。我建议改为mousedown或mouseup事件。

Answer 3

我相信您的问题是更改了innerHTML，这会更改DOM，这是一个巨大的性能问题。

Answer 4

是的，您可能想要将innerHTML的性能与document.createElement（）进行比较，甚至是：

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

对A / B进行各种重构时，分析代码可能会有所帮助：

javascript onclick处理程序中的性能问题

4 个答案: