Question

我的页面中有一个链接，当用户点击此链接时，我将使用$.getJSON加载一些数据，如果服务器繁忙或互联网速度连接较低，此响应大约需要10秒钟，所以可能是用户再次点击此链接，如何更改我的代码以防止第二次点击？我的意思是，如何定义用户是否第二次点击链接，什么都没有？

这是点击事件：

$('#showResult').click(function () {
     $.getJSON (url, data, function updateForm() {

        .... MY CODE ....

     });
});

抱歉我的英语不好： - （

Answer 1

你可以这样做：

$('#showResult').click(function () {
     var _this = this;
     if (this.inprogress) {
         alert('please wait');
         return;
     }
     this.inprogress = true;
     $.getJSON (url, data, function updateForm() {

        .... MY CODE ....
        _this.inprogress= false;
     });
});

但通常我更喜欢显示进度微调器，并且当我正在进行长时间加载时整个窗口变灰，以便用户知道他必须等待：

loading = {
    count: 0
};

loading.finish = function() {
    this.count--;
    if (this.count==0) this.$div.hide();
};

loading.start = function() {
    this.count++;
    if (!this.$div) {
        var html = '<div style="position: fixed;z-index:100;left:0;top:0;right:0;bottom:0;background: black;opacity: 0.6;">'; // this class covers and greys the whole page
        html += '<table width=100% height=100%>';
        html += '<tr><td align=center valign=middle>';
        html += '<img src=img/loading.gif>';
        html += '</td></tr>';
        html += '</table></div>';
        this.$div=$(html);
        this.$div.prependTo('body');
    }
    setTimeout(function(){
        if (loading.count>0) loading.$div.show();
    }, 500);
};

$('#showResult').click(function () {
     loading.start();
     $.getJSON (url, data, function updateForm() {

        .... MY CODE ....

        loading.finish();
     });
});

（使用此代码，仅当ajax调用时间超过500毫秒时才显示微调器。）

Answer 2

您可以尝试取消绑定点击，例如

$('#showResult').click(function () {
     $(this).unbind("click");
     $.getJSON (url, data, function updateForm() {

        .... MY CODE ....
        //after response data you can rebind it

     });
});

OR 您可以添加一些属性并进行检查，例如在单击后添加“clicked”作为数据

$('#showResult').click(function () {
     if($(this).data("clicked") {
         return false;
     }
     else {
       $.getJSON (url, data, function updateForm() {

        .... MY CODE ....
        $('#showResult').data("clicked", true);
       });
     }
});

Answer 3

此代码应捕获元素上的双击，并防止该事件冒泡。

$("#showResult").on('dblclick',function(e){
  e.preventDefault();
});

如果您只是想在发生其他操作时阻止对元素的第二次单击，则可以使用布尔标志。类似于isWorking。

var isWorking = false;

$("#showResult").on('click',function(){
  if (!isWorking){
    //execute code here!
    isWorking = true;
  }else{
    // wait! something is still working!
  }
});

在动作完成后，不要忘记将旗帜恢复到原来的位置。

isWorking = false;

Answer 4

var doJson = function(doCallback) {
     $('#showResult').unbind('click');
     $.getJSON (url, data, function updateForm() {
        .... MY CODE ....
        doCallback();
     });
}

$('#showResult').click(function () {
    doJson(function() {
        $('#showResult').bind('click', this));
    });
});

回调绑定函数，函数取消绑定它：）

当数据仍在加载时阻止第二次单击

4 个答案: