制作棋盘时的 JavaScript 性能

Question

我使用html表格绘制一个棋盘(8x8)，然后生成一个随机出现在棋盘中的黄色单元格。这是代码:

$('#random').click(function(){
                for (i=0; i<100; i++){
                    setInterval(function(){
                        resetBoard(); // re-draw chess board without yellow cell
                        var index = Math.floor((Math.random() * 64));
                        $('.chess-board tr td').eq(index).css('background-color', 'yellow');    
            }, 150);
                }
});

黄色细胞的出现并没有停止。并且该代码使浏览器计算量很大(我在任务管理器中看到 Firefox 在运行此代码时使用了 32% 的 CPU)。 请问这是什么问题，谢谢兄弟？

Answer 1

您在 for 循环中不断初始化一系列新的重复计时器，以便这些计时器函数最终连续触发，每个计时器之间的延迟非常小(没有， 请)。因此，您的事件循环应该像这样非常繁忙:

Time lapse

---

T0 ........... interval#1 first runs

T0+1 ......... interval#2 first runs

T0+3 ......... interval#3 first runs

...

T0+15 ........ interval#16 first runs

.............. interval#1 reruns

T0+16 ........ interval#17 first runs

.............. interval#2 reruns

.... (lots of intervals start to concur, keep CPU busy)

如果您坚持使用计时器来延迟棋盘的渲染。即使添加新计时器没有多大意义，也要继续重复计时器。我不确定你为什么需要这个。这会增加您的任务并使您的应用远离响应能力。

您应该更好地使用超时来触发场景中的函数

您可能希望在前一个计时器完成后运行下一个计时器，而不是连续按顺序运行大量计时器。代码的框架可能如下所示:

var n=0;
function renderBoard(){
    resetBoard(); // re-draw chess board without yellow cell
    var index = Math.floor((Math.random() * 64));
    $('.chess-board tr td').eq(index).css('background-color', 'yellow');

    // After finish, add a delay of 150 ms to run the subsequent action
    n++;
    if (n<100)
       setTimeout(renderBoard, 150);
}

setTimeout(renderBoard, 150);