禁用所有单击/键入事件，直到ajax调用完成为止

Question

在ajax调用完成之前，如何禁用所有链接才能被触发？

我需要在.(click)事件和.on('keyup')触发器上都发生这种情况。

我几乎想要的是：

– Ajax链接被触发（通过单击或键入）

– Ajax调用运行（并且正在运行–禁用所有链接）

– Ajax调用完成，并且链接重新启用。

Answer 1

您可以添加微调器并在前台显示微调器，直到您的Ajax请求成功为止。 这是示例代码。 这是一个例子。

function OnAjaxStart(ajaxContext) {
$("#spinner").show();
$("a").unbind("click");
$("a").unbind("keyup");
}

function OnAjaxComplete(ajaxContext) {
$("#spinner").hide();
}


function DisplayDataById(actionUrl, data) {
OnAjaxStart();

var request = $.ajax({
url: actionUrl,
data: { data: data},
cache: false
});

request.done(function (data) {
$('#' + divName).empty().html(data);
OnAjaxComplete();
});
}

这是微调器HTML：

<div id="spinner" style="margin: 0px; padding: 0px; position: fixed; right: 0px;
  top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001;
  opacity: .8; filter: alpha(opacity=70); display: none">
  <p style="position: absolute; top: 30%; left: 45%; color: White;">
    Please wait ...<img src="@Url.Content("~=""/images/loading-image.gif")" alt="Loading">
  </p>
</div>

Answer 2

/*  CSS */
#overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1000000;
}

在ajax电话上使用此

overlay = $("<div id='overlay'></div>").prependTo('body');
    $(document).on("keydown",function(objEvent) {
    if (objEvent.keyCode == 9) {  //tab pressed
        objEvent.preventDefault(); // stops its action
    }
   });

在ajax调用完成时使用此

overlay.remove();
$(document).off("keydown");