JSFiddle - React, Tailwind, and code Playground

demonstrating nested-loop speeds

by jonchius

HTML

<div id="display1"></div>
<div id="display2"></div>
<div id="count"></div>

JavaScript

withoutLoop(200);
withLoop(200);

// without nested loop
function withoutLoop(iterations) {
  $("#count").append("<h1>without nested loop</h1>");
  var start1 = Date.now();
  $("#count").append("<p>began: " + start1 + "</p>");
  for (var i=0; i<iterations*iterations; i++) {
    $("#display1").html((i+1));
  }
  var end1 = Date.now();
  $("#count").append("<p>ended: " + end1 + "</p>");
  $("#count").append("<p>This took <strong>" + (end1-start1) + "</strong> milliseconds</p>");
}

// with nested loop
function withLoop(iterations) {
  $("#count").append("<h1>with nested loop</h1>");
  var start2 = Date.now();
  $("#count").append("<p>began: " + start2 + "</p>");
  for (var i=0; i<iterations; i++) {
    for (var j=0; j<iterations; j++) {
      $("#display2").html((i+1));
      }
  }
  var end2 = Date.now();
  $("#count").append("<p>ended: " + end2 + "</p>");
  $("#count").append("<p>This took <strong>" + (end2-start2) + "</strong> milliseconds</p>");
}