JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

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

CSS

/*

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

requestIdleCallback (“ленивый” обратный вызов) это новый API, созданный для планирования несущественных фоновых задач, в те моменты, когда браузер свободен. 

*/

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', testRequestIdleCallback);

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

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