jQuery .when().done()无法正常工作 [英] jQuery .when().done() not working

问题描述

我首先要说我是jQuery的新手，我怀疑我只是在做一些愚蠢的事情，所以希望对某人来说这很简单.

I'd like to start by saying I'm new to jQuery and I suspect I'm just doing something stupid, so hopefully this will be very simple for someone.

我正在尝试向我的网站添加一个滑动移动子菜单.我想要一种手风琴效果，如果单击一个父链接，则会打开子子菜单，而关闭所有其他子菜单.问题是时间问题-子子菜单打开，然后通过重置所有子菜单再次关闭.我想答案是使用延迟，但是我尝试过的所有方法都失败了.这是(当前不起作用)代码:

I'm trying to add a sliding mobile sub-menu to my website. I want an accordian effect whereby if I click one parent link, it's child sub-menu opens and all other sub-menus close. The problem is timing - the child sub-menu opens and then is closed again by the resetting of all sub-menus. I presume the answer is to use deferreds but everything I've tried has failed. This is the (currently not working) code:

function ResetMenu(){
    jQuery(".mobile-menu").find(".sub-menu").slideUp(100);
    jQuery(".mobile-menu").find(".menu-item-has-child").removeClass("open");
};

function OpenSubmenu(){
    jQuery(this).next("ul").slideDown(100);
    jQuery(this).parent().addClass("open");
};

jQuery("li.menu-item-has-children > a").click(function(){

    if(jQuery(this).parent().hasClass("open")){
        jQuery(".mobile-menu").find(".sub-menu").slideUp(100);
        jQuery(this).parent().removeClass("open");
    } else {
        jQuery.when(ResetMenu()).done(OpenSubmenu());
    }
    return false;
});

任何帮助将不胜感激.谢谢！

Any help would be greatly appreciated. Thank you!

角色

推荐答案

这是如何使用jQuery.when()的常见错误.

This is a common mistake in how to use jQuery.when().

jQuery.when()要求使用promise作为参数.它没有神奇的力量来知道何时通过函数，而以某种方式完成了它.这些函数必须返回在完成基础代码后已解决或拒绝的承诺，然后可以将这些承诺传递给jQuery.when().

jQuery.when() requires promises as arguments. It does not have magical powers to know when functions you pass it are somehow done. Those functions MUST return promises that are resolved or rejected when the underlying code is done and you can then pass those promises to jQuery.when().

您的ResetMenu()函数不返回任何内容，因此，您的jQuery.when()不等待任何内容.它立即执行.then()处理程序(看起来不是您想要的).

Your ResetMenu() function doesn't return anything so therefore, your jQuery.when() doesn't wait for anything. It executes the .then() handler immediately (which looks like that is not what you want).

因此，在这一行:

jQuery.when(ResetMenu()).done(OpenSubmenu());

ResetMenu()必须返回一个保证，以便jQuery.when()知道何时完成.

ResetMenu() MUST return a promise for jQuery.when() to know when it is done.

您可以通过以下方法修复ResetMenu()以这种方式工作:

You could fix ResetMenu() to work that way by doing this:

function ResetMenu(){
    return jQuery(".mobile-menu").find(".sub-menu").slideUp(100).promise().then(function() {
        // remove this class when the animation has completed
        jQuery(".mobile-menu").find(".menu-item-has-child").removeClass("open");
    });
};

然后，进一步，您需要更改将函数传递给.done()的方式，这两者都使其仅是可以稍后执行并绑定适当的this值的函数引用:

And, then further, you need to change how you pass a function to .done() to this which both makes it just a function reference that can be executed LATER and binds a appropriate this value to it:

jQuery.when(ResetMenu()).done(OpenSubmenu.bind(this));

注意，.bind(this)假定this是适当的值.您可以在此处传递正确值的任何值，该值将在执行时成为OpenSubmenu()内部的this值.

Note, the .bind(this) assumes that this is the appropriate value. You can pass whatever value is the correct value there and that will become the this value inside of OpenSubmenu() when it is executed.

这篇关于jQuery .when().done()无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！