防止数据仍在加载时发生第二次点击

问题描述：

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

这是Click事件：

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

     .... MY CODE .... 

    }); 
});

对不起，我英文不好:-(

可以禁用按钮，当成功获取数据，您启用 – Ricky 2012-07-16 11:57:22

答

您可以尝试解除绑定一下，像

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

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

    }); 
});

OR 你可以添加一些属性并检查它，就像在点击后添加“点击”数据一样

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

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

答

你可以做这样的事情：

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

答

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

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

答

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

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

回调绑定功能，该功能解除绑定吧:)

防止数据仍在加载时发生第二次点击

相关推荐