javascript - Jquery双击超时

Question

我有一个可点击的 div，它应该首先显示一条文本指令，再次点击以触发 ajax 操作，该操作位于第一次单击后添加的新类名下。此文本已超时，将变回原始文本。

问题是，一旦文本恢复到原始状态，实际的 ajax 触发操作也应该停止工作，但实际的类不会被删除。有什么建议吗？

我真正需要的是一种带有 2 秒超时的双击..

function onlyfire() {
  $(".onlyfire").click(function() {
    var div = $(this);
    var original = $(this).html();
    div.html("Tap again");
    $(".onlyfire").addClass("fire");
    setTimeout(function() {
      $(div).html(original);
      $(".onlyfire").removeClass("fire");
    }, 2000);
    $(".fire").click(function(fire) {
      $.ajax({
        type: "POST",
        data: dataString,
        url: "something.php",
        cache: false,
        success: function(html) {
          div.html(html);
        }
      });
    });

    return false;
  });
};

<div class="onlyfire">
  Do Something
</div>

这是 jsfiddle: https://jsfiddle.net/jngqzw7q/1/

Answer 1

您可以在点击处理程序中使用 if 语句来查看它是第一次还是第二次点击(通过检查类)，并执行适当的操作:

function onlyfire() {
  $('.onlyfire').click(function() {
    var div = $(this);
    if (div.is('.fire')) { // second click
        alert("this is showing only when the text is 'Tap again'");
    } else { // first click
      var original = $(this).html();
      div.text("Tap again");
      div.addClass("fire").removeClass('.onlyfire');
      setTimeout(function(){ 
        $(div).html(original);
        $(".onlyfire").removeClass("fire");
      }, 2000);
    }
    return false;
  });
};
onlyfire();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="onlyfire">
Do Something
</div>

注意:在事件处理程序中为另一次点击设置点击处理程序并不总是一个好主意。