title: Java Script Sorting algorithm visualizer
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>k = []
  len = 100;
  time = true
  
  cont = document.getElementsByClassName("cont")[0];
  cont.innerHTML = "";
  for (let i = 0; i &lt; len; i++) {
      t = Math.round(Math.random() * 800 ) + 5
      k.push(t);
      cont.innerHTML += "&lt;div class='block' style = 'height:" + t + "px'&gt;&lt;/div&gt;"
  }
  
  
  function reset(){
      k = []
      cont.innerHTML = "";
      for (let i = 0; i &lt; len; i++) {
          t = Math.round(Math.random() * 800 ) + 5
          k.push(t);
          cont.innerHTML += "&lt;div class='block' style = 'height:" + t + "px'&gt; &lt;/div&gt;"
      }
  
  }
  
  function bubble(){
      function iloop(i){
          if(i &lt; len){
          setTimeout(function(){
              function jloop(j){
                  if(j &lt; len){
                  setTimeout(function(){
                      if (k[j] &gt; k[j + 1]) {
                          let tmp = k[j];
                          k[j] = k[j + 1];
                          k[j + 1] = tmp;
                      }
                      cont.innerHTML = "";
                      for (let p = 0; p &lt; len; p++) {
                          cont.innerHTML += "&lt;div class='block' style = 'height:" + k[p] + "px'&gt;&lt;/div&gt;"
                      }
                      j++;
                      jloop(j);
                  }, 100);
                  }
              }
              jloop(0);
  
  
  
              i++;
              iloop(i);
          }, 100);
          }
      }
      iloop(0);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.cont {
    width: 100%;
    height: 900px;
    display: block;
    background-color: pink;
    padding: 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center; }
    .cont .block {
      display: inline-block;
      width: 10px;
      margin: auto 1px;
      background-color: red;
      font-size: 5px;
      bottom: 0px; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="reset" onclick="reset()"&gt;Reset Array
  &lt;/button&gt; 
  &lt;button class="bubble" onclick="bubble()"&gt;Bubble Sort
  &lt;/button&gt; 
  &lt;div class="cont"&gt; 
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am using this simple code to make a javascript visualizer for sorting algorithm but the problem is that it is very choppy and skips multiples frames while running even at a delay of 100ms. I have an i7 7700hq and gtx 1060 so I know that the problem is mostly not my laptop but my approach to it so what approach should I take</p>
  
  <p>Here is a code pen version if your snippets are not working
  <a href="https://codepen.io/varunagarwal/pen/gOaQqbG" rel="nofollow noreferrer">https://codepen.io/varunagarwal/pen/gOaQqbG</a></p>
  
  <p>Edit: someone told me to make it a runnable snippet so there you go</p>