Canvas не обновляется, пока не завершится выполнение JavaScript

Question

Выполнение Infix для реализации стека PostFix с использованием HTML5 canvas.Желаемый результат: элемент box на холсте должен выводить каждый символ в течение 1 секунды, а затем исчезать.Хотя проблема в том, что поле элемента в канве обновляется после завершения выполнения кода, что приводит к перекрытию всех символов в блоке элемента холста и затем исчезает через 1 секунду.

Пожалуйста, взгляните на код ниже:

function convert(e){         // when convert button click
    var x = document.getElementById('infix').value;
    var stack = new Stack();
    stack.postFix(x);
}

function elementVisualize(ele){
    var eleVis = canvas.getContext('2d');

    eleVis.fillText(ele,150,150);
    console.log(ele);

    setTimeout(function(){
        eleVis.clearRect(100,80,148,148);
    }, 1000);
}

postFix(exp){           // Stack.postFix function
    for(var i = 0; i < exp.length ; i++){
        var c = exp[i];
        if((c>='0' && c<='9') || (c>='A' && c<='Z') || (c>='a' && c<='z')){
            elementVisualize(c);
        }
    }

}

В любом случае можно обновить холст для каждого персонажа отдельно?

Answer 1

Один из вариантов: elementVisualize возвращает Promise, который разрешается при очистке прямоугольника, и await, что Promise на каждой итерации цикла for:

function elementVisualize(ele){
    var eleVis = canvas.getContext('2d');

    eleVis.fillText(ele,150,150);

    return new Promise((resolve) => {
        setTimeout(function(){ 
            eleVis.clearRect(100,80,148,148);
            resolve();
        }, 1000);
    });
}

async postFix(exp){           // Stack.postFix function
     for(var i = 0; i < exp.length ; i++){
     var c = exp[i];
     if((c>='0' && c<='9') || (c>='A' && c<='Z') || (c>='a' && c<='z')){
           await elementVisualize(c);
     }
}

Если метод postFix также может быть вызван снова до того, как все анимации будут выполнены, и вы хотите, чтобы он ожидал завершения анимаций предыдущего вызова postFix, вы можете рассмотреть постоянную сортировку очередей, к которой postFix выдвигает элементы (символы exp) и получает elementVisualize shift() элемент из этого массива, а затем снова вызывает себя после анимации, если в массиве остаются некоторые символы.