Как определить, когда браузер завершил обновление представления (изменить макет, применить любой измененный CSS)

Question

У меня есть код, который я хотел бы запустить, который выглядит примерно так: псевдокод:

1. Применить некоторый стиль CSS к некоторому элементу

2. Выполните какое-то другое действие

Проблема в том, что мне не нужно выполнять «другое действие» до тех пор, пока я не уверен, что браузер на самом деле отобразил измененный CSS и будет видимымпользователю.

Несмотря на то, что Javascript является однопоточным, и если «другое действие» блокирует дальнейшее выполнение Javascript, я думаю, что браузер, возможно, все еще сможет обновить представление с новым CSSзначения, установленные на шаге 1, даже если сам Javascript заблокирован - но этого, похоже, не происходит (изменения CSS не отображаются до окончания шага 2 - в этом случае вызов удаленного сервиса - завершается).

Answer 1

Добавляя к комментарию Греццо, вы можете использовать тайм-аут JS 0, чтобы завершить выполнение предыдущей строки кода. Это работает, потому что он помещает все, что находится внутри замыкания setTimeout, в самый конец внутренней очереди кода для запуска. Э.Г.

// Update CSS  
$('#mydiv').css({'position' : 'relative', 'top' : 0});
setTimeout(function() {
    funcToRunAfterUIUpdate()
}, 0);

Я слишком n00b на StackOverflow, чтобы опубликовать ссылку, я думаю, в противном случае вы можете прочитать раздел "MASTERING THE REFRESH () METHOD" здесь: http://cubiq.org/iscroll-4

"Здесь мы поместили вызов на обновление в нулевой тайм-аут, тем самым предоставив браузеру время для обновления, и новые измерения элементов были приняты правильно. Есть и другие способы убедиться, что браузер действительно обновил DOM, но так далеко нулевой таймаут оказался самым надежным. "

Answer 2

Есть два отдельных файла JavaScript ... Добавьте css, где вы хотите изменить css, а другой - внизу страницы непосредственно перед тегом body, и это обеспечит выполнение вашего js позже после загрузки страницы

Answer 3

Не могли бы вы использовать setTimeOut() для вызова функции вызова удаленной службы, что дает очень небольшой промежуток времени, в течение которого браузер выполняет рендеринг перед выполнением функции, которая поддерживает рендеринг?

У вас есть пример? jsFiddle что ли?

Answer 4

Если вы поместите код Javascript в раздел head вашей страницы за пределами функций, этот Javascript будет работать до загрузки содержимого веб-страницы. Если вы размещаете код Javascript вне функций в разделе body своей веб-страницы, то этот Javascript будет работать во время загрузки страницы (когда загрузка страницы достигает кода). В обоих случаях вся веб-страница не будет загружена, особенно если на странице много изображений.

здесь вы можете получить больше информации о событиях на странице.

http://javascript.about.com/library/bltut31.htm