JSFiddle - React, Tailwind, and code Playground

by Michael Vashevko

HTML

<div id='out_immediate' style='display: inline-block'>
</div>
<div id='out_delayed' style='display: inline-block'>
</div>


<!-- SOLUTION -->
<div id='out_delayed_solution' style='display: inline-block'>
</div>

CSS

div {
  padding: 1rem;
}

JavaScript

// interview question

var fruits = {'apple': 123, 'orange': 456, 'cherry': 789};

// immediate print
for (var f in fruits) {
  var fruit = f + ' ' + fruits[f];
	document.getElementById('out_immediate').innerHTML += fruit + '<br/>';
}

// delayed print
for (var f in fruits) {
  var fruit = f + ' ' + fruits[f];
  setTimeout(function () {
  	document.getElementById('out_delayed').innerHTML += fruit + '<br/>';
  }, 1000);
}


// SOLUTION
// delayed print - solution
for (var f in fruits) {
  var fruit = f + ' ' + fruits[f];
  (function (fr) {
    setTimeout(function () {
      document.getElementById('out_delayed_solution').innerHTML += fr + '<br/>';
    }, 1000);
  })(fruit);
}