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

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

＆＃13;

$('#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'
       );
      });
    });
  }); 
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

感谢您的帮助

Answer 1

想法是获取click事件的时间戳，并将时间戳存储在回调之外。因此，外部变量将使用最新的单击时间戳进行更新。现在我们可以检查每个嵌套回调是否要在已经发生其他点击时执行它（clickTime！== lastClickTime）。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

最好的逻辑，这是我能做的最好的..你的代码处于凌乱状态，称为回调地狱。在处理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');
    });
});

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

我需要停止当前事件jquery

2 个答案: