Javascript代碼未在函數結束前執行

Question

我的項目是制作一個 Web 應用程序，以圖形方式顯示 Prim 和 Dijkstra 算法的不同階段。 這是通過顯示圖表和優先級隊列來實現的，如果節點在隊列中、已訪問或當前正在訪問，則更改節點顏色。 優先級隊列與包含隊列中節點的表一起顯示。 我使用 JavaScript 和 Sigma JS 來顯示圖表。

我的問題是刷新圖形和優先級隊列的代碼僅在它們被調用的函數結束時執行。 當我使用調試器並在關鍵功能處停止時，一切都顯示正確。 但是當我不使用調試器時，刷新圖形和更新視覺優先級隊列的部分僅在 Dijkstra() 函數的末尾執行。 睡眠功能不是唯一的問題，有沒有它都有同樣的問題。

謝謝你的幫助

腳本.js

var graphe = new WeightedGraph();
...
function onStartClick(){
    if(radio === 'p') graphe.Prim();
    if(radio === 'd') graphe.Dijkstra(0);
}
...
function createQueue(queue){
    var a = '<table id="queueTable"><tbody><tr>';

    for(elem in queue){
        var name = Object.keys(graphe.adjacencyList)[queue[elem].element]
        a+= "<td>"+name+"</td>";
    }
    a+="</tr><tr>"
    for(elem in queue){
        a+= "<td>"+queue[elem].priority+"</td>";
    }

    a+="</tr></tbody></table>";
    var qc = document.getElementById("queue-container");
    console.log(qc);
    qc.innerHTML = a;
}
...

算法.js

class WeightedGraph 
{
...
      sleep(ms) {
        var start = new Date().getTime(),
          expire = start + ms;
        while (new Date().getTime() < expire) {}
        return;
      }

    Dijkstra(start){
        this.tabVisited = [];
        this.tabRencontred = [];

        for(var i = 0; i < Object.keys(this.adjacencyList).length; i++){
            this.tabVisited.push(false);
            this.tabRencontred.push(false);
        }
        this.visiterPriorite(start);
    }

    visiterPriorite(sommetCourant) {
        if(!this.tabVisited[sommetCourant])
        {
            var priorityQueue = new PriorityQueue();
            priorityQueue.enqueue(sommetCourant, 0); // ->
            var csChar = Object.keys(this.adjacencyList)[sommetCourant];

            // Not executing till the end of the function
            s.graph.nodes().forEach(n => {
                if(n.id === csChar)
                {
                    n.color = "grey";
                }
            });
            s.refresh();
            createQueue(priorityQueue.items)

            this.sleep(500);

            while(!priorityQueue.isEmpty())
            {
                ...
                // code posing problem is called again here
                ...
            }
        }
    }
...
}    

Answer 1

我通過將函數 visiterPriorite 設置為 async 解決了我的問題： async visiterPriorite(sommetCourant)

並將我的睡眠方法更改為下面的方法

async sleep(ms) 
{
    return new Promise((resolve, reject) => {setTimeout(resolve, ms)});
}