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

Answer 2

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，所以我只保留回调函数。

使用jquery延迟

2 个答案: