Я не совсем понимаю потоки JavaScript

Прежде чем я углублюсь в вопрос. Позвольте мне заявить, что под Event Loop я имею в виду http://en.wikipedia.org/wiki/Event_loop . Это то, что реализуют браузеры. Для получения дополнительной информации прочтите это: http: // javascript. info / tutorial / additional-javascript-features / events-and-timer-depth .

Это сложный и длинный вопрос, поэтому постарайтесь смириться с ним! И я ценю все ответы!

Итак. Теперь, насколько я понимаю, в JavaScript есть один главный поток (то есть в большинстве браузерных сред). Итак, код вроде:

for (var color = 0x000; color < 0xfff; color++) {
    $('div').css('background-color', color.toString(16));
}

создаст анимацию от черного к белому, но вы этого не увидите, потому что рендеринг выполняется после обработки кода (когда происходит следующий тик - браузер входит в цикл событий).

Если вы хотите увидеть анимацию, вы можете сделать:

for (var color = 0x000; color < 0xfff; color++) {
    setTimeout(function() {
        $('div').css('background-color', color.toString(16));
    }, 0);
}

В приведенном выше примере будет создана видимая анимация, потому что setTimeout отправляет новое событие в стек цикла событий браузера, которое будет обработано после того, как ничего не запущено (он входит в цикл событий, чтобы увидеть, что делать дальше).

Кажется, что в этом случае браузер имеет события 0xfff (4095), помещенные в стек, где каждое из них обрабатывается с промежуточным процессом рендеринга. Итак, мой первый вопрос (№1) - когда именно происходит рендеринг? Всегда ли это происходит между обработкой двух событий в стеке цикла событий?

Второй вопрос касается кода в ссылке на веб-сайт javascript.info, которую я вам дал.

...
  function func() { 
    timer = setTimeout(func, 0)
    div.style.backgroundColor = '#'+i.toString(16)
    if (i++ == 0xFFFFFF) stop()
  }

timer = setTimeout(func, 0)
....

Мой вопрос здесь в том, будет ли браузер помещать новое событие "рендеринга" в стек цикла событий каждый раз, когда оно достигает div.style. ... = ... линия? Но разве он не запускает событие сначала из-за вызова setTimeout? Итак, не окажется ли браузер в стеке типа:

setTimeout event
render event

Поскольку вызов setTimeout был обработан до изменения стиля div? Если так выглядит стек, тогда я предполагаю, что в следующий раз, когда браузер войдет в цикл событий, он обработает обратный вызов setTimeout и в конечном итоге получит:

rendering event
setTimeout event
rendering event

и продолжит событие рендеринга, созданное предыдущим вызовом setTimeout?