javascript - 在 ajax 调用发生时暂停用户

Question

我在页面上有几个按钮，单击这些按钮时会触发 ajax 调用，然后访问数据库。
单击后，我希望用户在 ajax 调用响应之前无法单击任何按钮。
但是，如果可能的话，我希望用户能够得到一些系统正在运行的指示，这样他就不会认为系统被卡住了。
某种简单的动画和使页面变灰可以达到目的，直到有响应。

此外，我想对 ajax 调用设置一个时间限制，这样如果 10 秒内没有响应，调用将返回并给出错误消息。

我有什么选择？

我在 WordPress 下工作，所以如果它有一些好的方法来处理这个问题，那也是一个选择。

Answer 1

这样就可以了

js

$('#overlay').show();

$.ajax({
   url: 'somepage.htm',
   timeout: 10000, /*milliseconds*/
   })
  .complete(function(){ $('#overlay').hide(); }) /*runs after success or error*/
  .success(function(data){ /*do whatever*/ })
  .error(function(){ /*timeout or general error*/ });

html

<div id="overlay"></div>

CSS

#overlay{
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:#666;
  opacity:0.6;
  z-index:999;
}

演示地址:http://jsfiddle.net/gaby/X6sDS/1/