Оптимизация кода javascript. Как лучше?

Question

[Сергей Сулаков]

Суть такая: на сервере PHP генерирует набор чисел, к примеру:

$numbers = array('+1','+6','-4','+3','+4','-1','+7','+2','-5','+1','-2','+5','-4','+2');

Дальше на странице нужно воспроизвести в таком формате - каждую секунду появляется очередная цифра и сопровождается аудиофайлом(озвучка этого числа), в конце посетителю нужно ввести суммарный ответ.
Проблема возникает в следующем:
Как сделать это лучшим образом?
На данный момент это реализовано так:

foreach($numbers as $index => $number){?>
	interval = setTimeout(function() {
        $("#number").html("<?=$number?>");//Показ слагаемого
        sound.play('peek')//Озвучивание
    }, <?=(3800+($index*1000))?>);
<?}

И получается так, что если будет 100 чисел - то будет 100 интервалов.
Как можно это в цикле яваскрипта написать что ли?

И вопрос 2: как в JavaScript сделать непрерывный показ случайного числа со сменой жтого числа каждую секунду?

Comments

[RubaXa]

jsbin.com/riyelataco/edit?html,js,output

Answer 1

[Stalker_RED]

Выведем все числа так, чтобы их можно было забрать в js

<span id="numbers" style="display: none;"><?=implode(',', $numbers)?></span>
<pre id="display">start</pre>

(function(){
    var numbers = document.querySelector('#numbers').innerHTML.split(','), // распарсим числа
        delay = 1000, // задержка между цифрами, msec
        len = numbers.length,
        counter = 0,
        display = document.querySelector('#display'),
        timer = setInterval(function(){ // запустим таймер
            if (counter < len) { // если еще не добрались до конца массива
                display.innerHTML = numbers[counter++]  // выводим число
            } else {
                clearInterval(timer) // или выключаем таймер
                display.innerHTML = 'end!'
            }
        }, delay)
    })()

Демо: jsfiddle.net/Stalk/1dat8qmq/1

UPD: на второй вопрос: используйте setInterval() и Math.random()

Comments

[Сергей Сулаков]

Подскажите еще такое: некоторая цифра "задерживается" на 1,5 секунды вместо положенной одной, а следующая проскакивает за 0,5 секунд. Это уже от сервера никак не зависит, браузер что-ли затормаживает... Что можно предпринять?

[Stalker_RED]

Сергей: Да, вероятно притормаживает браузер.
Можно посмотреть загрузку процессора - чем вообще занят комп.
Можно посмотреть диспетчер задач в хроме (Shift+Esc) - может какие-то плагины тормозят. Ютуб в соседней вкладке, например.
Затем запустить профайлер (F12 и там поискать). О профайлере лучше отдельный гайд почитать.

Answer 2

[Александр Таратин]

https://developer.mozilla.org/en-US/docs/Web/Guide...
https://developer.mozilla.org/en-US/docs/Web/Event...
https://github.com/kriskowal/q (только для удобства)