jQuery Anchor Clicked多次触发

时间:2014-08-03 18:19:05

标签: javascript jquery html ajax

以下是该方案:

当用户点击锚标签给fecht&时发送ajax请求更新Instagram媒体状态。

但是需要一段时间来检索响应,在那段时间用户点击了该锚标记上的N次。

所以每次发送请求时,我都不希望出现这种行为。

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

目前我在用户点击它时添加该类,并使用它我决定用户是否点击了锚标记?

如果方式不正确,请告诉我。

这是小提琴网址(未点击链接至少2次以上,它发送2+请求which is i don't want

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

感谢

4 个答案:

答案 0 :(得分:2)

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

而不是像其他人那样在成功通话中设置它;你应该使用完整的回调来设置它。为了确保服务器是否返回错误,它仍然再次绑定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);
})();

答案 1 :(得分:1)

设置一个标志来检查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;
                    }
                });
        }

    });
})();

UPDATED FIDDLE

答案 2 :(得分:1)

您可以使用.off()取消绑定点击元素。

(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

答案 3 :(得分:0)

试试这个

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