Question

How can I stop loading function after user is clicked too many times on link?

Jquery code looks like:

$(document).ready(function(){
$(".menu_rfr").click(function() {
$("#main").html('<img src="img/spin.gif" class="spin">');
location.replace($(this).attr('rel'));

});

$(".menu_clickable").click(function() {
$("#main").html('<img src="img/spin.gif" class="spin">');
$("#main").load($(this).attr('rel'));

});

});

HTML:

<div class="menu_rfr prof_info" id="prof_info" rel="?a=1">info</div>
<div class="menu_clickable prof_info3" id="prof_info" rel="?a=3">info 3</div>

EDIT:

this is the link of the sample page with this Jquery code.
link text

Answer 1

Disable the button once it has been clicked:

$(".menu_clickable").click(function() {
    $(this).attr("disabled", "disabled");
    $("#main").html('<img src="img/spin.gif" class="spin">');
    $("#main").load($(this).attr('rel'), function() {

        // reactivate it after some loading has completed
        $(this).removeAttr("disabled");        
     });
});

You should always reactivate the link within the success callback to ensure that the loading has completed, e.g.:

$.get($(this).attr('rel'), function(html) {
    $("#main").html(html);
    $(this).removeAttr("disabled");
});

EDIT: updated, based on your comment. If your ‘action’ element is a div, you will have to unbind the click event to prevent re-clicks from having an effect, and re-bind once the loading has completed e.g.:

function handleClick() {
    $(this).unbind("click");
    $("#main").html('<img src="img/spin.gif" class="spin">');
    $("#main").load($(this).attr('rel'), function() {

        // reactivate it after some loading has completed
        $(this).click(handleClick);        
    });        
}
$(".menu_clickable").click(handleClick);