有没有办法在完成第一个对象后在另一个对象上调用 jquery 函数?

Question

我想淡出对象 1，淡出后删除一个类并添加一个。之后在另一个对象上，对象 2 应该淡入，然后我给它分配一个类。我遇到的问题是，如果我触发事件的速度快于淡入/淡出，则对象将保持活动状态。

$('.menuA').on("click", function () {
$('.menuA').removeClass("blue accent-3 z-depth-2", 100);
let clicked = $(this);
$('.menuA').promise().done(function () {
clicked.addClass("blue accent-3 z-depth-2", 100);
})
animatePanes($(this).attr("con"));
})
function animatePanes(pane) {
let paneOld = $('.pane-active');
paneOld.fadeOut(250).removeClass("pane-active").addClass("pane-inactive").promise().done(function () {
$('.' + pane).fadeIn(250).removeClass("pane-inactive").addClass("pane-active");
});
};

这是我与函数的事件。问题是，如果我单击以快速触发菜单 A 上的事件，窗格Old 不会使类窗格处于非活动状态。

我已经尝试做一个全局变量来检查事件是否正在运行，但它不起作用(可能是因为我想错了(。

有没有办法在事件完全完成之前禁用事件侦听器？

还是有更好的方法？

Answer 1

你肯定可以用全局变量来做到这一点——正如你已经说过的。也许你只是放错了地方。

我建议使用类似 isAnimating=false的东西，如果它的值为 true，则"禁用"点击事件侦听器。这样，您可以在所有动画完成后立即将isAnimating重置为false。

var isAnimating = false;
$('.menuA').on("click", function() {
if (!isAnimating) {
$('.menuA').removeClass("blue accent-3 z-depth-2", 100);
let clicked = $(this);
$('.menuA').promise().done(function() {
clicked.addClass("blue accent-3 z-depth-2", 100);
})
animatePanes($(this).attr("con"));
isAnimating = true;
}
})
function animatePanes(pane) {
let paneOld = $('.pane-active');
paneOld.fadeOut(250).removeClass("pane-active").addClass("pane-inactive").promise().done(function() {
$('.' + pane).fadeIn(250).removeClass("pane-inactive").addClass("pane-active").promise().done(function() {
isAnimating = false;
});
});
}