Question

I have a delete button to delete a photo. The first click animates a div on top with the message: “Click again if you really want delete this photo.” A second click deletes the photo. If you don’t click again in 3sec since the first click, the message will disappear. But then if it disappears and you click the button again, it will still be deleted. I need to stop the script when message disapper to stop post $.ajax()

$(".delete").toggle(function(){
    $("#top").html("Click again if you really want delete this photo.");
    $("#top").animate({top: "0"}).delay(3000).animate({top: "-50"});
    return false;
}, function() {
    $("#top").animate({top: "-50px"});
    var id = $(this).attr("id");
        $.ajax({
           ...
        });
});

Answer 1

You could just put a variable in the closure like this:

var allowDel;
$(".delete").toggle(function(){
    allowDel = true;
    $("#top").html("Click again if you really want delete this photo.");
    $("#top").animate({top: "0"}).delay(3000).animate({top: "-50"});
    setTimeout(function() { allowDel = false; }, 3000);
    return false;
}, function(){
    if (!allowDel) return;
    $("#top").animate({top: "-50px"});
    var id = $(this).attr("id");
        $.ajax({
           ...
        });
});