0

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

这是点击事件：

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

        .... MY CODE ....

     });
});

对不起，我的英语不好 ：-（

4

4 回答 4

2

你可以做这样的事情：

$('#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 毫秒时才会显示微调器）。

于 2012-07-16T11:58:45.020 回答
1

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

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

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

     });
});

或者您可以添加一些属性并对其进行检查，例如单击后将“clicked”添加为数据

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

        .... MY CODE ....
        $('#showResult').data("clicked", true);
       });
     }
});
于 2012-07-16T11:58:43.383 回答
1

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

$("#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;

于 2012-07-16T11:58:50.380 回答
0 
var doJson = function(doCallback) {
     $('#showResult').unbind('click');
     $.getJSON (url, data, function updateForm() {
        .... MY CODE ....
        doCallback();
     });
}

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

回调绑定函数，函数解除绑定:)

于 2012-07-16T12:00:54.217 回答