Javascript в HTML5 - нужно спать () несколько раз, чтобы показать шаги

Question

Я пишу текст на холст 3 раза в трех разных местах, используя функцию. В настоящее время функция не содержит параметров, но она использует глобальную переменную, которая изменяется между вызовами функции для указания счетчика, который используется для определить текст, который выводится. Он может принимать параметр и использоваться в цикле с локальной, а не глобальной переменной.

После того, как эти три текстовые строки выводятся на холст, который я хочу показать последовательно ...

Затем я вызываю другую функцию, которая очищает холст и показывает конечный результат.

Я хочу, чтобы все это происходило последовательно со временем между ними.

Я пробовал setTimeout () и setInterval (), а также пробовал функцию pausecomp (ms), предложенную одним респондентом. Никто не дал мне желаемых результатов.

вот пример того, что я делаю ...

c=document.getElementById("canvas");
ctx=c.getContext("2d");

function whap(opt)
{
    var comp=Math.floor(Math.random()*3)+1; // determines computer choice
    ctx.fillStyle="#92B9CC";
    ctx.fillRect(0,0, c.width, c.height);

    num = 1;
    goCount();
    sleep(500);
    num = 2;
    goCount();
    sleep(500);
    num = 3;
    goCount();
    sleep(500);

    drawChoice(choice, comp);
}

function goCount()
{
    ctx.fillStyle="#340CF7";
    if(num == 1)
    {
        ctx.fillText("One...", 50, 100);
    }
    else if(num == 2)
    {
        ctx.fillText("Two...", 100, 150);
    }
    else if(num == 3)
    {
        ctx.fillText("Three...", 150, 200);
    }
    else
    {
        ctx.fillText("Go!!", 200, 250);
    }
}

function drawChoice(n, x)
{
    /* this function redraws the canvas the based on the two parameters,
determines whether the player won or lost and fills the canvas 
with the results... drawing the appropriate images onto the canvas 
then filling the canvas with the appropriate text.
    */
}

Answer 1

Как правило, вы не можете блокировать вызовы в js (есть только несколько исключений, но они не рекомендуются, потому что он блокирует весь пользовательский интерфейс). Поэтому вам нужно либо работать с отложенными объектами, либо использовать обратные вызовы, подобные этому:

function sleep(next) {
    window.setTimeout(next, 500);
}

num=1;
goCount();

sleep(function() {
   num = 2; 
   goCount();

   sleep(function() {
       num = 3;
       goCount();

       sleep(function() {
           drawChoice(choice, comp);
       });
   });
});