ajaxで出​​力データを遅延させますか？

Question

トグルで作業しようとしています

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（）？

ありがとうございます！

Answer 1

あなたのスライドアップでコールバックを使いたいかもしれないようです。スライドアップ機能が完了すると、コールバック機能が実行されます。 したがって、このような何か：

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

ことの欠点は、それは、しかし、あなたは時間の追加の長さを待たせる場合は可能性を有しており、slideupが発生した後まで、AJAXを通してそれを結果をロードしませんですが、問題を待っているように聞こえるわけではないので、あなたが必要とするものだけかもしれません。

実行中のような問題が発生した場合は、スライドアップ状態を保持する変数とAJAXから返されるHTMLを保持する変数の2つを作成します。 次に、ajax成功コールバックとスライドアップコールバックの両方を、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 = ''; 
    } 
} 

ので、あなたのslideupは、コールバック

$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();