如何處理超過100個移動矩形無滯後

我有這樣的小提琴：https://jsfiddle.net/reko91/e6uwqnof/2/如何處理超過100個移動矩形無滯後

按下按鈕它創建50個矩形所有下移向屏幕的底部。

for(i=0;i<50;i++){ 
enemyArray.push(new enemy(normalBullet.x+i*5, normalBullet.y, normalBullet.speed, 1, 10, "#F00")); 
}

第一次點擊就可以正常工作，但是一旦我開始添加更多，它確實開始滯後。是否有處理數百個移動元素的最佳練習方式？或者，HTML和Javascript不是處理這一數量移動數據的最佳語言？

來源

2016-02-15 thatOneGuy

@Gothdo嗯，小提琴*爲*使用的畫布。 –

@NiettheDarkAbsol接受他說的使用Canvas：L – thatOneGuy

@NiettheDarkAbsol我沒有看小提琴，但我看到OP在談論DOM元素，所以我認爲他們沒有使用Canvas。 –

你的主要問題是在update功能：

function update() { 
    // enemy.update(); 
    //if (keystate[SpaceBar]) { 
    $('#newEnemy').click(function() { 
    createNewEnemy() 
    }) 
    //... 
}

可能是一個錯誤，但你每一個連接被update稱爲時間，這是每秒60次的情況下！（直到它不能再這樣做了，就是這樣）。這意味着每次按下按鈕時，您都會在畫布右側產生一大堆的元素。

移動事件監聽器添加外部現場update，你是金。

來源

2016-02-15 22:39:36 MaxArt

也許downvoter關心解釋？畢竟，這*是答案。 – MaxArt

完美，如果其他人感興趣，這裏是更新後的解決方案：https：//jsfiddle.net/reko91/e6uwqnof/4/。不知道他們爲什麼低估，可能是同一個人投下我的問題。我認爲這是一個合法的問題。無論如何欣賞它，謝謝 – thatOneGuy

meh，抵消表決。 – djechlin

您在幀循環內分配按鈕按鈕，所以當您按下按鈕時，實際上它會調用按鈕按鈕，但循環已經運行多次。這個代碼之外

移動：

$('#newEnemy').click(function() { 
    console.log("createEnemy"); 
    createNewEnemy() 
});

來源

2016-02-15 22:41:59 bradlis7

抵消你的DV ...不是政治dvs.的粉絲。 – djechlin

@djechlin'抵消你的DV'是什麼意思？ – thatOneGuy

你有一個downvote，所以我upvoted，不是因爲我認爲這是一個很好的答案，但是因爲我認爲這是愚蠢的downvote它（我認爲有人只是不喜歡這個問題，並對它進行了陰謀處理）。 – djechlin

如何處理超過100個移動矩形無滯後

回答

相關問題