使用jquery延迟

我有以下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);
            }  

        });
    } 
});

几行之后，我尝试删除这个类，但是movemext太快了，以至于加载图标都没有显示出来。 ie-ajax内容还没有出现，但是jquery代码已经加载了类，在某处加载了ajax，然后删除了类-因此加载图标甚至没有显示

我试着使用延迟方法——在几秒钟或几秒钟后将其删除——但它不起作用

感谢您的帮助

谢谢

delay仅适用于动画，而不适用于removeClass等函数，因此需要超时。不仅如此，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调用完成，然后等待一秒钟，然后执行类内容。通常，只是为了炫耀你漂亮的微调器的计时器被认为是糟糕的用户界面，所以我只保留回调函数。

延迟只适用于动画，而不适用于removeClass之类的函数，因为你需要一个超时。不仅如此，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，所以我只保留回调函数。

如前所述，.delay只适用于动画方法。当Ajax请求完成时，只需删除该类即可。要保持代码解耦，请使用$.ajax返回的延迟对象，并将回调传递给：

如前所述，.delay仅适用于动画方法。当Ajax请求完成时，只需删除该类即可。要保持代码解耦，请使用$.ajax返回的延迟对象，并将回调传递给：

---

我认为您需要将使用delay的行移到GetSubs函数的成功回调中。我认为您需要将使用delay的行移到GetSubs函数的成功回调中。谢谢。谢谢你的帮助。delay方法只是一种尝试减慢进程的方法，但是你们建议的方法工作得很好，将它移动到success函数中。Complete将始终触发，因此不管成功与否，类都将被删除。注意，以防OP只想在成功时删除类。@FrançoisWahl-这就是我添加完整函数的原因，以确保加载程序被删除，但如果不是这样，则可以从成功处理程序调用回调。使用内置的差异对象而不是定义回调是一个更好的解决方案，所以我会选择Felix发布的答案@阿德内奥：是的，我看了菲利克斯的答案，也很喜欢。使用返回的promise接口听起来更合适，好吧。谢谢大家。谢谢你的帮助。delay方法只是一种尝试减慢进程的方法，但是你们建议的方法工作得很好，将它移动到success函数中。Complete将始终触发，因此不管成功与否，类都将被删除。注意，以防OP只想在成功时删除类。@FrançoisWahl-这就是我添加完整函数的原因，以确保加载程序被删除，但如果不是这样，则可以从成功处理程序调用回调。使用内置的差异对象而不是定义回调是一个更好的解决方案，所以我会选择Felix发布的答案@阿德内奥：是的，我看了菲利克斯的答案，也很喜欢。使用返回的promise接口听起来更合适。出于好奇，如果我正确理解文档，ajax会返回promise接口，这是否意味着我可以使用。done而不是。如果我总是只想在ajax调用成功后执行某些操作？@François:是的，这也是可能的。@FelixKing:谢谢你回复+1的答案。使用return对象看起来更干净，因为ajax调用本身不必担心如何执行它，这会好得多。很好。出于好奇，如果我正确理解了文档，ajax会返回一个承诺接口，这是否意味着我可以使用.done而不是.everys如果我只想在ajax调用成功时执行某些操作？@François:是的，这也是可能的。@FelixKing:谢谢你回复+1的答案。使用return对象看起来更干净，因为ajax调用本身不必担心如何执行它，这会好得多。不错。

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