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), и имеют elementVisualizeshift() элемент из этого массива, а затем снова вызвать себя после анимации, если в массиве осталось несколько символов.