Отрисовка происходит после всех задержек, как исправить?

@DeadPixel · Регистрация: 19.08.2020

Author24 — интернет-сервис помощи студентам

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

HTML5

<button onclick="draw()">
<canvas id="canvas" onclick="setArc(event.clientX,event.clientY)" width="400%" height="231px"
                        style="border: 1px solid red; background-color: black;"></canvas>
<script>
    function fillCircle(x, y, radius, color) {
        canvas = document.getElementById('canvas');
        context = canvas.getContext('2d');
        context.fillStyle = color;
        context.beginPath();
        context.arc(x + radius / 2, y + radius / 2, radius / 2, 0, 2 * Math.PI);
        context.fill();
    }
    function showArc(X, Y) {
        fillCircle(X, Y, 8, "WHITE")
    }
    function Delay(ms) {
        startTime = Date.now()
        while (Date.now() - startTime < ms) {}
    }
    function draw()
    {
        showArc(100, 20)
        Delay(100)
        console.log(1)
        showArc(100, 40)
        Delay(100)
        console.log(2)
        showArc(100, 60)
        Delay(100)
        console.log(3)
        showArc(100, 80)
        Delay(100)
        console.log(4)
        showArc(100, 100)
        Delay(100)
        console.log(5)
        showArc(100, 120)
        Delay(100)
        console.log(6)
        showArc(100, 140)
        Delay(100)
        console.log(7)
        showArc(100, 160)
        Delay(100)
        console.log(8)
        showArc(100, 180)
        Delay(100)
        console.log(9)
        showArc(100, 200)
        Delay(100)
        console.log(10)
    }
</script>

@DeadPixel · 19.03.2022, 11:55 **[ТС]**

Попробовал пока передавать код строкой, но пишет

Код

Uncaught TypeError: actions[i] is undefined
    <anonymous> file:///D:/learn/DIPLOM/end_live_lection/test.html:45

PHP/HTML

<button onclick="draw()">
<canvas id="canvas" width="200px" height="200px"
    style="border: 1px solid red; background-color: black;"></canvas>
<script>
    function fillCircle(x, y, radius, color) {
        canvas = document.getElementById('canvas');
        context = canvas.getContext('2d');
        context.fillStyle = color;
        context.beginPath();
        context.arc(x + radius / 2, y + radius / 2, radius / 2, 0, 2 * Math.PI);
        context.fill();
    }
    function Delay(ms) {
        startTime = Date.now()
        while (Date.now() - startTime < ms) {}
    }
    function draw()
    {
        setTimeout("fillCircle(50,20,8,'WHITE')",100)
        setTimeout("fillCircle(50,40,8,'WHITE')",300)
        setTimeout("fillCircle(50,60,8,'WHITE')",500)
        setTimeout("fillCircle(50,80,8,'WHITE')",700)
        setTimeout("fillCircle(50,100,8,'WHITE')",900)
        setTimeout("fillCircle(50,120,8,'WHITE')",1100)
        setTimeout("fillCircle(50,140,8,'WHITE')",1400)
        actions = []
        for (i = 0; i < 10; i++)
        {
            action = {
                x: Math.random()*100+70,
                y: Math.random()*100,
                time: i*500,
                type: "Arc"
            }
            actions.push(action)
        }
        for (i = 0; i < actions.length; i++)
        {
            //fn = function() {fillCircle(actions[i].x, actions[i].y,8,'WHITE'); console.log(actions[i].time - actions[0].time)}
            if (i > 0)
            {
                delay = actions[i].time - actions[0].time
                //setTimeout(fn(), delay)
                //setTimeout("fillCircle(Math.random()*50,140,8,'WHITE')", delay)
                setTimeout("fillCircle(actions[i].x,actions[i].y,8,'WHITE')", delay)
            }
            else fillCircle(actions[i].x,actions[i].y,8,'WHITE')
        }
    }
</script>

	19.03.2022, 11:55