задержка вывода данных с помощью ajax? - PullRequest
Новая
       12

задержка вывода данных с помощью ajax?

1 голос
/ 05 января 2012

Я пытаюсь работать с переключателем

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

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

('a').toggle(function(){
    $('.content').slideUp("fast");  
    $.ajax({
        type: "GET",
        url: "URL",
        data: data,
        success: function(data){
                $('.element').delay("slow").slideDown("fast").html(data);
        }
    });
},function(){
    $('.element').slideUp("slow");
    $('.content').delay("slow").slideDown("slow");

});


<div class='content'>
old information
</div>
<div class='element'>
New information from another page, being shown through ajax
</div>

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

Есть какие-нибудь мысли или идеи о том, как мне поступить по этому поводу?Может быть, лучший способ написать это?

Кроме того, есть ли способ удалить .html (данные)?поэтому, когда я вернусь к исходной папке, она исчезнет?Или мне просто нужно использовать функцию .hide ()?Может быть .remove ()?

Спасибо!

1 Ответ

1 голос
/ 05 января 2012

Звучит так, как будто вы можете захотеть использовать обратный вызов на вашем слайде. Он запустит функцию обратного вызова после завершения функции сдвига. Так что-то вроде этого: 

$('a').toggle(function(){
    $('.content').slideUp("fast", function(){
        $.ajax({
            type: "GET",
            url: "URL",
            data: data,
            success: function(data){
                $('.element').delay("slow").slideDown("fast").html(data);
            }
        });
    });

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

Если бы я столкнулся с той же проблемой, с которой, похоже, вы столкнулись, я бы, вероятно, создал 2 переменные, одну для хранения состояния сдвига и другую для хранения HTML, возвращаемого из AJAX. Затем я бы заставил и обратный вызов ajax success, и обратный вызов slideup запустить функцию, которая вставляла бы HTML-код и сдвигалась вниз, если выполняются 2 условия: 1) скольжение завершено и 2) запрос AJAX вернул результат.

Таким образом, как запрос, так и слайд / слайд-хаус будут работать вместе максимально быстро, но без наложения. 

// here's an example of the function you would have both slideUp and ajax success callbacks run
var $html,
    $slide = false; // false indicates we're not in the process of a slideup

function process_data()
{
    // only process the slidedown if we're not in the process of a slideup and we have the html we're after
    if (!$slide && $html)
    {
        $('.element').slideDown('fast').html($html);
        // make sure to empty $html afterwards so we don't assume we have data next time this runs
        $html = '';
    }
}

чтобы ваш слайд включал вышеуказанную функцию в обратный вызов 

$slide = true;
$('.content').slideUp('fast', function(){
     // the slideup is completed, so set the slide back to false
     $slide = false;

    // process data
     process_data();
});

и ваш успех Ajax также будет использовать process_data 

success: function(data){
    // store the returning data in the html variable
    $html = data;

    // process data
    process_data();
...