Прежде чем погрузиться в вопрос. Позвольте мне заявить, что в цикле событий я имею в виду http://en.wikipedia.org/wiki/Event_loop. Это то, что реализуют браузеры. Для получения дополнительной информации читайте это: http://javascript.info/tutorial/further-javascript-features/events-and-timing-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?