Ожидание завершения таймера до запуска функции

Question

Я думаю, что это довольно просто, но я не могу найти один онлайн. Это может быть в JavaScript или jquery.

Мне нужно создать таймер на 1-2 секунды. Между тем другая функция использует ajax для передачи данных в php-файл на стороне сервера. Когда текст ответа возвращается, он отображается на странице.

В данный момент у меня запущена функция ajax, и время, необходимое для завершения функции, составляет около 0,1 секунды. Но это заставляет страницу выглядеть действительно нервной, так как содержимое меняет стили CSS, в то время как ajax ожидает ответа, а затем возвращается к оригиналу (надеюсь, что это имеет смысл).

В любом случае, для борьбы с этим я бы хотел, чтобы функция проверяла, закончился ли таймер, прежде чем отображать текст ответа.

Единственный способ получить его в данный момент - это создать интервальный таймер на секунду и запустить функцию ajax, когда он завершится, но это не идеально, так как зритель ДОЛЖЕН ждать лишнюю секунду или 2, даже если запрос на сервер занимает это время, чтобы завершить.

Надеюсь, все это имеет смысл и большое спасибо за ваше время.

Chris

Answer 1

Вам лучше присоединить вашу функцию как обработчик "успеха" к вашему вызову AJAX, а не использовать фиксированный таймер. Как вы его прикрепите, зависит от того, какая библиотека, если таковая имеется:

Стиль jQuery 1.4 (по-прежнему работает в версии 1.5)

$.ajax({
    // your AJAX options

    success: yourFunc
});

jQuery 1.5 style

$.ajax({
    // your AJAX options
}).done(yourFunc);

DOM стиль

// after creating your XHR

xhr.onreadystatechange = function() {
    if (this.readyState === 4) { // 4 means the request has completed
        if (this.status !== 200) { // 200 is success, so anything else...
            // log or report error
            return;
        }

        // call your other function, which uses the AJAX data
        yourFunc(this.responseText);
    }
};

Answer 2

Я бы использовал setTimeout или jQuery .delay(), если таймер - ваш единственный вариант.

$.ajax({
    success: function() {
        setTimout(function() {
            // styling code goes here
        }, 1000);
    }
});