1

My project is to make a web application that graphically displays the different stages of the Prim and Dijkstra algorithm. This is made by displaying a graph and the queue of priority, and changing nodes color if they are in the queue, visited, or currently being visited. The priority queue is displayed with a table that contain the nodes in the queue. I use JavaScript and Sigma JS to display the graph.

My problem is that the code to refresh the graph and the priority queue only execute at the end of the function they are being called. When I use debugger and stop at the critical function, everything displays right. But when I don't use the debugger, the parts that refresh the graph and update the visual priority queue only execute at the end of the Dijkstra() function. The sleep function is not the one posing problem, with or without it there is the same problem.

Thanks for your help

script.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;
}
...

algos.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
                ...
            }
        }
    }
...
}
michjea
  • 95
  • 6
  • At least related: https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep The `sleep` method in your code just blocks the one thread that your code runs on, which is never a good idea (except for synthetically blocking the thread to simulate a blocking operation). – T.J. Crowder Jun 16 '22 at 07:22

1 Answers1

1

I solved my problem by setting the function visiterPriorite to async : async visiterPriorite(sommetCourant)

and changing my sleep method to the one below

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