javascript - 有没有办法在完成第一个对象后调用另一个对象上的 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");
            });

        };

这就是我的函数事件。问题是，如果我单击快速并触发 menuA 上的事件，则 paneOld 不会使类 Pane 处于非事件状态。

我已经尝试过创建一个全局变量来检查事件是否正在运行，但它没有起作用(可能是因为我认为错误)。

有没有办法禁用事件监听器，直到事件完全完成？

或者有更好的方法吗？

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