jQuery .when().done() 不工作

Question

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

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

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

任何帮助将不胜感激。谢谢!

罗内尔

Answer 1

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

jQuery.when() 需要 Promise 作为参数。它没有神奇的力量来知道你传递给它的函数何时以某种方式完成。这些函数必须返回底层代码完成后已解决或拒绝的 Promise，然后您可以将这些 Promise 传递给 jQuery.when()。

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

所以，在这一行中:

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

ResetMenu() 必须返回一个 promise ，让 jQuery.when() 知道它何时完成。

您可以通过执行以下操作来修复 ResetMenu() 以这种方式工作:

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() 的方式，这既使其成为可以稍后执行的函数引用，又绑定(bind)了适当的 这个值:

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

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