1

私は次のjqueryコードを持っています。基本的に - アンカーから値を取得し、その下にサブメニュー コンテンツを表示します。これは完全に機能します。

$(function(){ 

    $('.plus').live('click', function(event){
        event.preventDefault();
        $(this).addClass('lower');
        var existingPath = $(this).attr('rel');

        GetSubs(this, existingPath);
        $(this).removeClass('plus').addClass('open');   //.delay(10000).removeClass('lower');
    });

    function GetSubs(IDclicked, existingPath){
        var dataString;
        dataString = 'lang=<%=Lang%>&rel=[' + existingPath + ']';


        $.ajax({
            type: "GET",
            url: "/includes/getSubCatMenuLinks.asp",
            data: dataString,
            success: function(data) {
                $(data).insertAfter(IDclicked);
            },
            error: function(obj,msg) {
                alert('*** Error! ***\n\n'+msg);
            }  

        });
    } 
});

私がやりたいことは、コンテンツの読み込み中に「読み込み中」アイコンを表示し、完了したら削除することです。

それを表示することは問題ありません-それが行で行われたことです

 $(this).addClass('lower');

数行下にあるときに、そのクラスを削除しようとしましたが、movemext は非常に高速であるため、読み込みアイコンも表示されません。つまり、ajax コンテンツはまだ表示されていませんが、jquery コードは既にクラスをロードし、(どこかで) ajax をロードしてからクラスを削除しているため、ロード アイコンも表示されません。

遅延メソッドを使用してみました-1秒または数秒後に削除しましたが、機能しません。

どんな助けでも大歓迎です！

ありがとう！

4

2 に答える 2

5

既に述べたように、.delayアニメーション メソッドでのみ機能します。Ajax リクエストが完了したら、クラスを削除するだけです。コードを分離したままにするには、によって返される遅延オブジェクトを利用し、メソッド[docs]$.ajaxにコールバックを渡します。.always

 var $this = $(this).addClass('lower');
 // ...

 // or GetSubs(this, existingPath).done if you only want to remove the loader
 // when the call was successful. Use .fail to handle error cases.
 GetSubs(this, existingPath).always(function() {
     $this.removeClass('lower');
     // or
     // $this.removeClass('plus').addClass('open').removeClass('lower');
     // not quite sure when exactly you want to remove / add which classes
 }); 

 // ...

function GetSubs(IDclicked, existingPath){
    // ...

    return $.ajax({ // <- return the $.ajax return value
        // ...
    });
}
于 2012-08-19T19:42:22.550 に答える
1

delay()アニメーションでのみ機能し、removeClass などの関数では機能しないため、timeOut が必要になります。それだけでなく、Ajax 呼び出しは非同期であるため、クラスは即座に削除され、Ajax 呼び出しが完了するまで待機しません。

あなたはいつでもできる：

$(function(){ 
    $(document).on('click', '.plus', function(e){
        e.preventDefault();
        var self = this,
            existingPath = $(this).attr('rel');

        $(self).addClass('lower');

        GetSubs(self, existingPath, function() { //added callback
            setTimeout(function() { //and a one second delay
                $(self).removeClass('lower');
            }, 1000);
        });
    });

    function GetSubs(IDclicked, existingPath, callback){
        var dataString = 'lang=<%=Lang%>&rel=[' + existingPath + ']';

        $.ajax({
            type: "GET",
            url: "/includes/getSubCatMenuLinks.asp",
            data: dataString,
            success: function(data) {
                $(data).insertAfter(IDclicked);
            },
            complete: function() {
                callback.call(); //callback function is called when ajax is finished
            },
            error: function(obj,msg) {
                alert('*** Error! ***\n\n'+msg);
            }  
        });
    } 
});​

これは ajax 呼び出しが終了するのを待ってから、1 秒待ってからクラス処理を行います。通常、素敵なスピナーを見せびらかすためだけのタイマーは悪い UI と見なされるため、コールバック関数はそのままにしておきます。

于 2012-08-19T19:36:36.113 に答える