Question

使用HTML5 canvas对PostFix Stack实现进行修复。所需的输出是，画布中的元素框必须必须输出每个字符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，它会在清除矩形后进行解析，并在{{1 }}循环：

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的项目，然后在动画结束后再次调用自身（如果还有一些字符）在数组中。

直到JavaScript完成执行后，画布才会更新

1 个答案: