Таймаут больше после каждого повторения

Question

Я пытаюсь создать функцию, которая воспроизводит звуковой эффект и заменяет изображение на сайте изображением из массива после определенной задержки (currentTime). Предполагается, что задержка будет увеличиваться после каждого повторения, пока время всех повторений (maxTime) не превысит 20000 миллисекунд (около 20 повторений). В текущем макете сайт зависает. Я попытался переместить вычисление currentTime, maxTime и tabIndicator из таймаута, но тогда задержка всегда составляет 2000 миллисекунд (это время последнего повторения). Есть какие-нибудь советы?

function roll()
        {

            var maxTime=0;
            var currentTime=0;
            var addValue=100;
            var tabIndicator=0;

            while(maxTime<=20000)

            {

                window.setTimeout(function(){
                    currentTime = currentTime + addValue;
                    maxTime = maxTime + currentTime;

                    music();
                    document.getElementById("write").innerHTML += (currentTime + "<br>" + maxTime + "<br>" + addValue + "<br><br>");

                    tabIndicator++;
                    if(tabIndicator == 9){ tabIndicator = 0; }
                },currentTime)



            }
        }

Answer 1

Попробуйте это.

function roll()
{
   var maxTime=0;
   var currentTime=0;
   var addValue=100;
   var tabIndicator=0;

    var playMusic = function()
    {
        window.setTimeout(function(){
           currentTime = currentTime + addValue;
           maxTime = maxTime + currentTime;
           music(); 
           document.getElementById("write").innerHTML += (currentTime + "<br>" + maxTime + "<br>" + addValue + "<br><br>");

           tabIndicator++;
           if(tabIndicator == 9){ tabIndicator = 0; }
           if (maxTime <= 20000)
               playMusic();
        },currentTime);
    };

    playMusic();
}