我正在尝试提高我创建的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的结束.我应该在PageRequestManager – EndRequest中以某种方式从服务器端更改javascript变量吗?
干杯
最佳答案 首先,不要让您的服务器参与UI调整大小算法.完全是客户端.您可以随时将结果数据发送到服务器,但不要根据服务器响应进行实时UI定位.应该使用CSS或javascript逻辑在客户端处理.
第二关,如果您的代码无法在同一时间处理两个ajax调用,那么您的选项如下:
>修复您的代码,以便它可以同时处理飞行中的顺序ajax响应.
>在发送第二个响应时,取消/忽略第一个ajax响应,以便忽略第一个响应并等待第二个响应.
>防止第二个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调用因任何原因失败时重置全局标志.