jQuery Anchor Clicked triggered by multiple times

Question

Here is the scenario:

I am sending ajax request when user click on anchor tag to fecht & update instagram media status.

But it take sometime to retrieve the response, in that time user clicked N number of time on that anchor tag.

So each time it sends the request, I am don't want such behaviour ..

Is there any easy way to handle such situation?

Currently I am adding the class when user clicked on it, and using that I am deciding user has click on anchor tag or not??

Please let me know, if it is correct way or not..

Here is fiddle URL (Not clicked on link at least 2+ times, it send 2+ request which is i don't want )

http://jsfiddle.net/bkvaiude/mxb8x/

thanks

Answer 1

You should use should remove the click event and then set it up again when the ajax call is complete:

Instead of setting it in the success call as the others do; you should use the complete callback to set it. To make sure if the server returns an error it is still binding the click event again.

http://jsfiddle.net/eWwZt/

(function (){
    console.log("bhushan");
    var ajaxCall = function(e){
        $("#test").off("click");
        console.log("click");
        e.preventDefault();
        var is_liked_url = "https://api.instagram.com/v1/media/popular?client_id= b52e0c281e584212be37a59ec77b28d6";
        $.ajax({
            method: "GET",
            url: is_liked_url,
            dataType: "jsonp",
            success: function(data) {
                console.log("data...");
            },
            complete: function(){
                $("#test").on("click", ajaxCall);
            }
        });
    }

    $("#test").on("click", ajaxCall);
})();

Answer 2

Put a flag to check if ajax call completed or not this way:

(function (){
    var RequestInProgress = false;
    console.log("bhushan");
    $("#test").on("click", function(e){
         e.preventDefault();
        if(!RequestInProgress) // if request not in progress send
        {
            RequestInProgress = true;
                var is_liked_url = "https://api.instagram.com/v1/media/popular?client_id= b52e0c281e584212be37a59ec77b28d6";
                $.ajax({
                    method: "GET",
                    url: is_liked_url,
                    dataType: "jsonp",
                    success: function(data) {
                        console.log("data...");
                        RequestInProgress = false;
                    }
                });
        }

    });
})();

UPDATED FIDDLE

Answer 3

You can use .off() to unbind click to element.

(function () {
    console.log("bhushan");
    var Myfunction = function (e) {
        $("#test").off("click");  //Unbind click
        e.preventDefault();
        var is_liked_url = "https://api.instagram.com/v1/media/popular?client_id= b52e0c281e584212be37a59ec77b28d6";
        $.ajax({
            method: "GET",
            url: is_liked_url,
            dataType: "jsonp",
            success: function (data) {
                console.log("data...");
                $("#test").on("click", Myfunction);
            }
        });

    };
    $("#test").on("click", Myfunction);
})();

DEMO

Answer 4

try this

var gettingData =false;
$('selector').click(function() {
  gettingData = false;
  if (!gettingData) {
    gettingData =true;
    $.ajax(//do ajax logic)
           .success(
              gettingData = false; 
              //parse data)
           .error(
              gettingData = false; 
              //display some error
          );
  } else {
    return false;
  }
});