Производительность 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-процентный процессор во время его запуска). В чем проблема, спасибо, брат?

Answer 1

Вы держите инициализацией последовательность новых повторяющихся таймеров в цикле так что эти функции таймера в конечном счете, срабатывает в ряд с очень малой задержкой между каждым из них (нет, пожалуйста). Таким образом, ваш цикл событий должен быть массово занят, как это:

Время покадровой

---

T0 ........... интервал # 1 первые пробеги

Т0 + 1 ......... интервал # 2 первые пробеги

Т0 + 3 ......... интервал # 3 первые пробеги

...

T0 + 15 ........ интервал # 16 первые пробеги

.......... .... интервал # 1 повторов

T0 + 16 ........ интервал # 17 первых сеансов

.............. интервал # 2 повторы

.... (много интервалов начинают сходятся во мнении, держать процессор занят)

Если вы настаиваете, чтобы использовать таймер, чтобы задержать рендер доски. Продолжайте повторять свой таймер, даже если новые таймеры добавляются, не имеет большого смысла. Я не уверен, зачем вам это нужно. Это умножает ваши задачи и делает ваше приложение далеко не отзывчивым.

Вы должны лучше использовать тайм-аут, чтобы вызвать вашу функцию в вашем сценарии

Вы можете запустить следующий таймер после того, как предыдущий таймер закончит вместо последовательного запуска массовой загрузки таймеров непрерывно. Скелет кода может выглядеть следующим образом:

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); 

Answer 2

Вы создали 100 интервалов, которые запускаются каждые 150 миллисекунд! то есть 666 раз (ой ирония) каждый второй ... В каждом из них вы сбросить доски и искать DOM для

$('.chess-board tr td') 

, которые должны быть в кэше (сохраненный в переменной), прежде чем какой-либо интервал называется.

Что вы пытаетесь делать с этими интервалами?

Answer 3

$('#random').click(function(){ 
    var $chessCell = $('.chess-board tr td'); 
    for (i=0; i<100; i++){ // probably should not use this loop 
     update(); 
    } 
}); 
function update() { 
     resetBoard(); // re-draw chess board without yellow cell 
     var index = Math.floor((Math.random() * 64)); 
     $chessCell.eq(index).css('background-color', 'yellow'); 
     clearTimeout(timeout); 
     setTimer(); 
} 

function setTimer() { 
    timeout = setTimeout(update, 150); 
}