我需要停止当前活动 jquery

Question

这个HTML代码

<div id="functionality" style="padding: 10px 20px;">
    <span class="btn btn-xs btn-success" style="margin:2px; float: left;">flat earth account</span>
    <span class="btn btn-xs btn-success" style="margin:2px; float: left;">site preparation</span>
</div>

我有这个 jquery 代码

$('#functionality>span').click(function() {
    var text = $(this).html();
    $('.function-content').fadeOut('fast', function() { 
        var div = text.replace(/ /g,"_");
        $('#functionality_calculation').delay(500).fadeIn('slow', function() {
            $(this).delay(500).fadeOut('slow', function() {
                $('#' + div).fadeIn('slow');
                var winHeight = $(window).height();
                var divHeight = $("#"+div).height();
                var scrollHeight = (divHeight - winHeight) / 2
                $('html, body').animate({
                        scrollTop: ($("#"+div).offset().top + scrollHeight) + 'px'
                    }, 'slow'
                );
            });
        });
    }); 
});

现在

我需要的是当我点击任何跨度时我需要它来停止活动事件（运行事件）

我尝试了什么

event.stopPropagation();

event.preventDefault();

当我点击跨度时

1- 显示正在加载

2- 显示 div

我想做的是在这个过程中，如果我点击任何其他跨度，我需要它来停止上一个点击事件并开始新的点击事件

$('#functionality>span').click(function() {
  var text = $(this).html();
  $('.function-content').fadeOut('fast', function() { 
    var div = text.replace(/ /g,"_");
    $('#functionality_calculation').delay(500).fadeIn('slow', function() {
      $(this).delay(500).fadeOut('slow', function() {
        $('#' + div).fadeIn('slow');
        var winHeight = $(window).height();
        var divHeight = $("#"+div).height();
        var scrollHeight = (divHeight - winHeight) / 2
        $('html, body').animate({
          scrollTop: ($("#"+div).offset().top + scrollHeight) + 'px'
        }, 'fast'
       );
      });
    });
  }); 
});

.btn {
      display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    background: green;
    color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="functionality" style="padding: 10px 20px;">
    <span class="btn" style="margin:2px; float: left;">construction work</span>
    <span class="btn" style="margin:2px; float: left;">acts of sanitary wares</span>
</div>
<div style="clear: both;"></div>
<div id="functionality_calculation" style="padding: 20px; display: none;">
  <img src="http://archbrella.com/img/load.gif" />
</div>
<div style="clear: both;"></div>
<div id="construction_work" class="function-content" style="display: none;">
  construction works
</div>
<div style="clear: both;"></div>
<div id="acts_of_sanitary_wares" class="function-content" style="display: none;">
  acts of sanitary wares

</div>

感谢您的帮助

Answer 1

思路是获取点击事件的时间戳，将时间戳保存在回调之外。因此，外部变量将使用最新的点击时间戳进行更新。现在我们可以检查每个嵌套回调是否要在已经发生其他点击时执行它(clickTime !== lastClickTime)。

var lastClickTime;
$('#functionality>span').click(function() {
  var text = $(this).html();
  var clickTime = Math.floor(Date.now());
  lastClickTime = clickTime;


  $('.function-content').fadeOut('fast', function() {

    if (lastClickTime == clickTime) {
      var div = text.replace(/ /g, "_");
      
      
      //stop the previous animation and reset for the new animation to start
      $('.function-content').hide();
      $('#functionality_calculation').stop();
      $('#functionality_calculation').hide();

      $('#functionality_calculation').fadeIn(500, function() {

        if (lastClickTime == clickTime) {

          $(this).delay(500).fadeOut('slow', function() {

            if (lastClickTime == clickTime) {
              $('#' + div).fadeIn('slow');
              var winHeight = $(window).height();
              var divHeight = $("#" + div).height();
              var scrollHeight = (divHeight - winHeight) / 2;

              $('html, body').animate({
                scrollTop: ($("#" + div).offset().top + scrollHeight) + 'px'
              }, 'fast');
            }
          });


        } else {
          $(this).hide();
        }

      });
    }
  });

});

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  background: green;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="functionality" style="padding: 10px 20px;">
  <span class="btn" style="margin:2px; float: left;">construction work</span>
  <span class="btn" style="margin:2px; float: left;">acts of sanitary wares</span>
</div>
<div style="clear: both;"></div>
<div id="functionality_calculation" style="padding: 20px; display: none;">
  <img src="http://archbrella.com/img/load.gif" />
</div>
<div style="clear: both;"></div>
<div id="construction_work" class="function-content" style="display: none;">
  construction works
</div>
<div style="clear: both;"></div>
<div id="acts_of_sanitary_wares" class="function-content" style="display: none;">
  acts of sanitary wares

</div>

最符合这个逻辑，这是我能做的最好的。您的代码处于称为回调地狱的混乱状态。在处理 js 回调时，我们总是尽量避免这种情况。为您推荐的读物：
http://callbackhell.com/
https://github.com/caolan/async

Answer 2

每次点击，您需要：

立即停止当前动画，从而停止动画序列，
存储足够的数据来识别即将启动的动画序列中涉及的元素，
启动动画序列。

稍微扁平化后，动画序列应如下所示：

// Object in outer scope for remembering the current animation elements.
var current = {
    span: null,
    div: null,
    otherElements: $('html, body, .function-content, #functionality_calculation')
};

$('#functionality>span').click(function() {
    if(current.span) {
        // Stop all animations in the current animation sequence.
        // It's not important which, if any, is currently being animated - just stop them all.
        current.otherElements.add(current.span).add(current.div).stop(true);

        // It's hard to tell exactly what's right here, but something like this,
        // to get the various animated elements to an appropriate start state. ..
        curent.span.hide(); //??
        curent.div.hide(); //??
        $('.function-content').show(); //??
        $('#functionality_calculation').hide(); //??
    }
    // Remember `this` and its corresponding div for next time round
    current.span = this;
    current.div = $('#' + $(this).html().replace(/ /g, "_"));

    //Now set up the animation sequence as a .then() chain.
    $('.function-content').fadeOut('fast').delay(500).promise()
    .then(function() {
        return $('#functionality_calculation').fadeIn('slow').delay(500).promise();
    })
    .then(function() {
        return $(this).fadeOut('slow').promise();
    })
    .then(function() {
        current.div.fadeIn('slow');
        $('html, body').animate({
            scrollTop: (current.div.offset().top + (current.div.height() - $(window).height()) / 2) + 'px'
        }, 'slow');
    });
});

请注意，通过从动画序列的每个阶段返回一个承诺，下一阶段将等待其完成。

我需要停止当前活动 jquery

I need to stop the current event jquery

javascript

jquery

javascript-events