JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<button id="btn0">testTimeout</button>
  <button id="btn1">testImmediate</button>

CSS

/*

Функция, отложенная через setTimeout(..0) выполнится не ранее следующего «тика» таймера, минимальная частота которого может составлять от 4 до 1000 мс. И, конечно же, это произойдёт после того, как все текущие изменения будут перерисованы.

Для того, чтобы поставить функцию в очередь на выполнение без задержки, в Microsoft предложили метод setImmediate(func). Он реализован в IE10+ и на платформе Node.JS.
*/

JavaScript

console.clear();

var $ = document.querySelector.bind(document);
Element.prototype.on = Element.prototype.addEventListener;
Element.prototype.$  = function (selector){ return $(selector, this) }
 
 var $btn0 = $('#btn0');
 var $btn1 = $('#btn1');

$btn0.on('click', testTimeout);
$btn1.on('click', testImmediate);

function testTimeout() {
  var start = new Date();
  var i = 0;
  setTimeout(function go() {
    i++;
    if (i == 100) {
      console.log(new Date - start);
    } else {
      setTimeout(go, 0);
    }
  }, 0);
}

function testImmediate() {
  var start = new Date();
  var i = 0;
  setImmediate(function go() {
    i++;
    if (i == 100) {
      console.log(new Date - start);
    } else {
      setImmediate(go);
    }
  });
}