雙擊的jquery超時

Question

我有一個可點擊的div，它應該首先顯示一條文本指令以再次點擊以觸發ajax動作，這是在第一次點擊後添加的新類名下的。這段文字有一個超時，並且會改回原來的。

問題是，一旦文本回到原來的實際ajax火災行動也應該停止工作，但實際的類不會被刪除。有什麼建議麼？

我真正需要的是一種具有2秒超時了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()與eventnamespace作爲參數，參考.off()eventnamespace

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>

注意：在事件處理程序中爲另一次單擊設置單擊處理程序並不總是那麼好的主意。