使用jquery延迟

Question

我有以下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是如此之快 - 加载图标甚至不显示.ie - ajax内容还没有出现,但jquery代码已经加载了类,加载了ajax(某处)然后删除了类 - 所以加载图标甚至都没有显示.

我尝试使用延迟方法 - 将它删除一秒或几个晚上 - 但它不起作用.

任何帮助赞赏!

谢谢!

Answer 1

如前所述,.delay仅适用于动画方法.只需在Ajax请求完成后删除该类.要保持代码解耦,请使用返回的延迟对象并将$.ajax回调传递给.always方法^[docs]:

 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
        // ...
    });
}