异步发布这些数据以及取消/排队新请求的正确方法是什么?

What's the correct way of posting this data asynchronously, and canceling/queuing new requests?

本文关键字：请求 是什么 方法 新请求 数据 布这些 排队 取消 异步      更新时间：2023-09-26

我正在尝试提高我创建的web仪表板的稳定性。我注意到，进入糟糕状态的主要原因是用户动作太快，请求被打断。

例如，我有以下javascript:

//When a resize occurs a lot of handling needs to happen to convert the user's action into
//a visibly-pleasing result. In addition, the server has to be spoken with in order to save the controls.
function OnClientResizing(pane, eventArgs) {
    eventArgs.set_cancel(true);
    var parameters = new Array();
    parameters.push("Resize");
    parameters.push(pane.get_id());
    parameters.push(eventArgs.get_delta());
    __doPostBack(pane.get_splitter()._uniqueID, parameters);
}

此函数将艰苦的工作传递回服务器，以便在调整大小期间计算适当的方法来调整页面上的控件的大小。这需要X秒。如果用户在X秒之后再次调整页面大小——我就进入了糟糕的状态。要么旧的请求被过早地切断，要么新请求同时运行。无论哪种方式，控件都会在页面上变形。

因此，我想排队将来调整大小，或者取消当前的请求。我读到，做这样的事情的最好方法是简单地在这个函数的作用域之外设置一个标志。我可以这样做，但我不确定如何检测doPostBack的结束。我应该改变javascript变量从服务器端在PageRequestManager - EndRequest?

欢呼

首先，不要让您的服务器参与UI调整算法。完全在客户端完成。您可以随时将结果数据发送到服务器，但不要使实时UI定位依赖于服务器响应。这应该用CSS或javascript逻辑在客户端处理。

第二，如果你的代码不能同时处理两个ajax调用，那么你的选项如下:

  1. 修复你的代码，使它可以处理连续的ajax响应在同一时间飞行。
  2. 在发送第二个ajax响应时取消/忽略第一个ajax响应，以便忽略第一个响应并等待第二个响应。
    3. 在第一个ajax请求完成之前阻止第二个ajax请求。我不建议将它们排队，因为这只会导致更糟糕的用户体验。

如何执行1、2或3的细节取决于您尚未共享的代码的工作方式。

最简单的是选项3)。这可以通过一个全局标志来完成。只需定义一个全局变量，在开始ajax调用时将其设置为true，并在ajax调用完成时将其清除(在完成函数中):

var ajaxInFlight = false;  // global declaration
function OnClientResizing(pane, eventArgs) {
    if (ajaxInFlight) return;    // do nothing if ajax call already in flight
    ajaxInFlight = true;
    eventArgs.set_cancel(true);
    var parameters = new Array();
    parameters.push("Resize");
    parameters.push(pane.get_id());
    parameters.push(eventArgs.get_delta());
    __doPostBack(pane.get_splitter()._uniqueID, parameters);
}
function postBackCompletionHandler(id, parms) {
    ajaxInFlight = false;               // clear global flag, ajax call done
   // ... rest of your function here
}

您还必须确保处理错误条件，以便在ajax调用因任何原因失败时重置全局标志。

相关文章：