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（某处）然后删除了类 - 所以加载图标甚至不显示。

我尝试使用延迟方法 - 让它在几秒钟或几秒钟后移除 - 但它不起作用。

任何帮助表示赞赏！

谢谢！

4

2 回答 2

5

如前所述，.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
        // ...
    });
}
于 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 调用完成，然后等待一秒钟，然后执行类操作。通常只是为了炫耀你漂亮的微调器的计时器被认为是糟糕的 UI，所以我只保留回调函数。

于 2012-08-19T19:36:36.113 回答