title: How to add sleep and wait logic in javascript
body: <p>We are working on visualization of sorting algorithms, required to add sleep and wait logic to help visualize the selected element and the element to which it is compared. After searching li'l bit, we found a code "function sleep(milliseconds){...}" which should work as desired but has failed so far. </p>
  
  <p>In function insertionSort(){...}, the current element is depicted with color red and the element to which it is compared with is depicted with color blue, once the current element is swapped with the other the color of the element is again changed to white from blue (working correctly, verified using debugger), However during execution, these color transformations were not visible (only the element in red is displayed after each iteration)  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var element = function(value, color)
  {
    this.value = value;
    this.color = color;
  };
  
  var x = [];
  x[0] = new element(2, "white");
  x[1] = new element(1, "white");
  x[2] = new element(5, "white");
  x[3] = new element(4, "white");
  x[4] = new element(3, "white");
  x[5] = new element(7, "white");
  x[6] = new element(6, "white");
  x[7] = new element(8, "white");
  x[8] = new element(10, "white");
  x[9] = new element(9, "white"); 
  
  
  var i = 1;
  var context;
  var delayTime = 1000;
  
  function myFunction()
  {
     var bar = document.getElementById("bar");
     width = bar.width;
    height = bar.height;
     context = bar.getContext("2d");
    window.setInterval(insertionSort, 3000);
  }
  
  function insertionSort()
  {
      if(i&gt;=0 &amp;&amp; i&lt;x.length)
      {
         
    var j = i;
    x[j].color = "red";
    drawGraph(j);
    while(j&gt;0 &amp;&amp; x[j-1].value &gt; x[j].value)
    {
      
       x[j-1].color = "blue";
      x[j].color = "red";
     drawGraph();
     //need to add delay here
     sleep(delayTime);
     //swap
     var temp = x[j];
     x[j] = x[j-1];
     x[j-1] =  temp;
     drawGraph();
     // and here...
     sleep(delayTime);
     
     x[j].color = "white";
     drawGraph();
     
     j = j-1;
    }
    x[j].color = "white";
    i++;
     }
     else if(i&gt;=x.length)
     {
        for(k=0;k&lt;x.length;k++)
        {
        x[k].color = "white";
       }
         drawGraph();
         i=-1;
     }
  }
  
  function sleep(milliseconds) 
  {
     var start = new Date().getTime();
    for (var i = 0; i &lt; 1e7; i++) 
    {
       if ((new Date().getTime() - start) &gt; milliseconds)
       {
          break;
       }
     }
  }
  
  function drawGraph()
  { 
   context.StrokeStyle = "black";
   context.clearRect ( 0 , 0 , width, height);
      for(k=0;k&lt;x.length;k++)
      {    
    context.fillStyle = x[k].color;
    //x and y coordinate of top left corner of rectangle
       context.strokeRect(400+k*20, 18, 20, x[k].value*10);
       context.fillRect(400+k*20, 18, 20, x[k].value*10);
         
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;script language="javascript" type="text/javascript" src="../p5.js"&gt;&lt;/script&gt;
    &lt;!-- uncomment lines below to include extra p5 libraries --&gt;
   &lt;!--&lt;script language="javascript" src="../addons/p5.dom.js"&gt;&lt;/script&gt;--&gt;
    &lt;!--&lt;script language="javascript" src="../addons/p5.sound.js"&gt;&lt;/script&gt;--&gt;
    &lt;script language="javascript" type="text/javascript" src="sketch.js"&gt;&lt;/script&gt;
    &lt;!-- this line removes any default padding and style. you might only need one of these values set. --&gt;
    &lt;style&gt; body {padding: 0; margin: 0;} &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    
    &lt;button onclick="myFunction()"&gt;Try it&lt;/button&gt;
    &lt;canvas id="bar" width="1000" height="400" style="border:2px"&gt;&lt;/canvas&gt;
    
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>