Когда я использую AJAX, я обычно делаю что-то перед каждым запросом, чтобы пользователь знал, что он будет ждать секунду. Обычно это делается путем добавления анимированного GIF-файла загрузки. Когда я делаю это, Firefox делает то, что вы ожидаете, и добавляет gif перед тем, как переместить элемент управления на следующую строку (где называется AJAX). В Chrome он блокирует браузер и вообще не вносит никаких изменений в DOM (не говоря уже о загрузке изображения), включая даже изменение цвета чего-либо, до завершения AJAX. Это не просто AJAX. Это все, что удерживает контроль, и оно никогда не вносит изменения DOM, пока управление не будет возвращено в окно.
Пример (с использованием jQuery):
function submit_order()
{
$('#my_element').css('color', '#FF0000'); // Make text red before calling AJAX
$.getJSON('/api/', my_callback)
// Note, in IE and Chrome #my_element isn't turned red until the AJAX finishes and my_callback is run
}
Почему это происходит и как я могу это решить? Я не могу использовать ASYNC из-за характера данных (это будет большой беспорядок). Я экспериментировал с использованием window.setTimeout(myajaxfunc, 150) после установки стиля, чтобы увидеть, установит ли он стиль, а затем установить тайм-аут, но, похоже, проблема не только в AJAX, а в управлении скриптом в целом думаю, отсюда и название, упомянутое AJAX, потому что это единственный раз, когда я сталкиваюсь с этой проблемой).
Это не имеет ничего общего с тем, что оно находится в функции.