doubleclick的Jquery超时

Question

我有一个可点击的div，它应该首先显示一个文本指令，以便再次点击，以便触发ajax操作，这是在第一次单击后添加的新类名。此文本有超时，将更改回原始文本。

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

我真正需要的是一种具有22秒超时的doubleclick。

​

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

可以使用.one()并将event namespace作为参数，.off()引用event namespace

​

function handleClick(e) {
  var div = $(this).data("original", this.innerHTML);
  // var original = div.html();
  div.html("Tap again");
  $(".onlyfire").off("click").addClass("fire");
  // http://stackoverflow.com/questions/39057179/why-is-click-event-attached-to-classname-fired-after-classname-is-removed#comment65464000_39057261
  var fire = $(".fire");
  fire.one("click.fire", function() {
    alert("this should not be showing once the text is changed back to original");
  });
  setTimeout(function() {
    fire.off("click.fire");
    div.removeClass("fire")
    .html(div.data("original")).click(handleClick);
  }, 2000);
}

function onlyfire() {
  $(".onlyfire").click(handleClick);
};
onlyfire();

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

​

Answer 2

您可以在单击处理程序中使用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>

​

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