每次重复后超时时间更长

Question

我正在尝试制作一个播放声音效果的功能，并在一定的延迟（当前时间）后用数组中的图像替换现场图像。每次重复后延迟应该会变长，直到所有重复的时间 (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();
}

每次重复后超时时间更长

Timeout longer after every repetition

javascript

timeout