多次触发的jQuery锚点单击

Question

这是场景：

当用户单击锚标记以访问并更新instagram媒体状态时，我正在发送ajax请求。

但是需要花费一些时间来检索响应，在那段时间内，用户在该锚标记上单击了N次。

因此，每次发送请求时，我都不需要这种行为..

有没有简单的方法来处理这种情况？

目前，我在用户单击类时添加了该类，并以此来确定用户是否单击了锚标记？

请告诉我是否正确的方法。

这是小提琴网址（至少2次以上未点击链接，它发送了2个以上which is i don't want请求）

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

谢谢

Answer 1

您应该使用应该删除click事件，然后在ajax调用完成后再次设置它：

不要像其他人那样将其设置在成功呼叫中； 您应该使用complete回调进行设置。 为了确保服务器是否返回错误，它仍在重新绑定click事件。

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

标记以检查ajax调用是否以这种方式完成：

(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;
                    }
                });
        }

    });
})();

更新场

Answer 3

您可以使用.off()来将click绑定到元素。

(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

尝试这个

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;
  }
});