代码之家 › 专栏 › 技术社区 › Tom

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

cross-browser user-interface browser performance javascript

1

Tom · 技术社区 · 17 年前

我用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

4 回复 | 直到 17 年前

1

3

Mike Dinescu 17 年前

您可以尝试只更改类名,而不是向DOM中删除/添加div(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;
      }
    }
}

2

great_llama 17 年前

3

1

Daniel A. White 17 年前

我相信你的问题是改变了生活方式 innerHTML

4

1

steamer25 17 年前

是的,您可能希望将innerHTML的性能与document.createElement()进行比较,甚至:

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