Optimizing JS long task without webworker – is setTimeout a good way and the only way? [closed]

I am trying to optimize some of my JS long tasks.

Using webworker is a good way but webworker can’t handle DOM. So I am thinking about using setTimeout to do this.

Looks it work great. But this setTimeout a good way to do this job? Is there any modern technologies to postpone some function calls?

Original code:

var time = 0;

window.setInterval(function () {
  time++;
  $('#timer').html(time);
}, 100);

$('#reset').on('click', function () {
  $('#output').empty();
  time = 0;
});

$('#button1').on('click', function () {
  var result;
  for (var i = 0; i < 1e9; i++) {
    result = i;
  }
  $('#output').html('Done! Counted to ' + result);
});

$('#button2').on('click', function () {
  var blob = new Blob(
    Array.prototype.map.call(
      document.querySelectorAll('script[type="text/js-worker"]'),
      function (oScript) { return oScript.textContent; }
    ),
    { type: 'text/javascript' }
  );

  // Create a new worker containing all "text/js-worker" scripts.
  var worker = new Worker(window.URL.createObjectURL(blob));

  // Listen for a message from the worker
  worker.addEventListener('message', function (e) {
    $('#output').html(e.data);
  }, false);

  // Start the worker
  worker.postMessage('');
});

<script type="text/js-worker">
  var result;
  self.addEventListener('message', function (e) {
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    // Send message back to the main script
    self.postMessage('Done! Worker counted to ' + result);
  }, false);
</script>

<button type="button" id="button1">Run without Workers</button>
<button type="button" id="button2">Run with Workers</button>
<button type="button" id="reset">Reset</button>
<div>Timer: <span id="timer">0</span></div>
<div>Output: <span id="output"></span></div>

Optimized by setTimeout:

var time = 0;

window.setInterval(function () {
  time++;
  $('#timer').html(time);
}, 100);

$('#reset').on('click', function () {
  $('#output').empty();
  time = 0;
});

$('#button1').on('click', function () {
  var result;

  setTimeout(()=>{
    for (var i = 0; i < 1e8; i++) {
      result = i;
    }
  }, 1000);
  setTimeout(()=>{
    for (var i = 0; i < 1e8; i++) {
      result = i;
    }
  }, 2000);
  setTimeout(()=>{
    for (var i = 0; i < 1e8; i++) {
      result = i;
    }
  }, 3000);
  setTimeout(()=>{
    for (var i = 0; i < 1e8; i++) {
      result = i;
    }
  }, 4000);
  setTimeout(()=>{
    for (var i = 0; i < 1e8; i++) {
      result = i;
    }
  }, 5000);
  setTimeout(()=>{
    for (var i = 0; i < 1e8; i++) {
      result = i;
    }
  }, 6000);
  setTimeout(()=>{
    for (var i = 0; i < 1e8; i++) {
      result = i;
    }
  }, 7000);
  setTimeout(()=>{
    for (var i = 0; i < 1e8; i++) {
      result = i;
    }
  }, 8000);
  setTimeout(()=>{
    for (var i = 0; i < 1e8; i++) {
      result = i;
    }
  }, 9000);
  setTimeout(()=>{
    for (var i = 0; i < 1e8; i++) {
      result = i;
    }
    $('#output').html('Done! Counted to ' + result);
  }, 10000);

});

$('#button2').on('click', function () {
  var blob = new Blob(
    Array.prototype.map.call(
      document.querySelectorAll('script[type="text/js-worker"]'),
      function (oScript) { return oScript.textContent; }
    ),
    { type: 'text/javascript' }
  );

  // Create a new worker containing all "text/js-worker" scripts.
  var worker = new Worker(window.URL.createObjectURL(blob));

  // Listen for a message from the worker
  worker.addEventListener('message', function (e) {
    $('#output').html(e.data);
  }, false);

  // Start the worker
  worker.postMessage('');
});

<script type="text/js-worker">
  var result;
  self.addEventListener('message', function (e) {
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    // Send message back to the main script
    self.postMessage('Done! Worker counted to ' + result);
  }, false);
</script>

<button type="button" id="button1">Run without Workers</button>
<button type="button" id="button2">Run with Workers</button>
<button type="button" id="reset">Reset</button>
<div>Timer: <span id="timer">0</span></div>
<div>Output: <span id="output"></span></div>