八年前关闭的
当我不得不处理异步问题时,我发现自己在用Javascript编写大量的意大利面条
应用程序(特别是在处理必须获取所有数据的OpenSocial代码时)
通常的模式是:
- 用户首次登录应用程序,获取其数据
- 对他的数据进行分析(例如,通过向服务器发送请求来获取他的朋友)
- 在这些数据上执行B(例如,将他的朋友发送到服务器进行一些处理)
- 对他的数据执行C(例如,检查服务器响应是否有效,以便我们可以执行其他操作)
请注意,此顺序执行路径(1=>2=>3=>4)不适合
Ajax,因此用户最终会等待很长时间,代码从每一步开始都会变得一团糟
取决于以前的
代码示例:
gadgets.util.registerOnLoadHandler(setupUser())
…
函数setupUser(){
var req=[获取数据和设置请求]
发送(一些url,一些数据,函数(response){getFriendsFor(response.user)});
}
函数getFriendsFor(用户){
var friends=[从用户获取朋友]
var req=[设置请求]
发送(一些其他url、一些其他数据、函数(响应{validateFriendsResponse(response.friends)});
}
函数validateFriendResponse(朋友){
if(friends.valid())
…
loadCanvas();
}
您可以看到,每个函数都依赖于前一个函数,更糟糕的是,它必须被调用
一个特定的顺序是有用的。当你不得不添加诸如显示/隐藏加载之类的东西时,情况会变得更糟
在用户等待时使用屏幕和其他噱头
你将如何着手解决这个问题
一个选项可能是有一个显示当前状态的变量,并有一个“控制器””函数,该函数始终是AJAX回调函数。根据当前状态,控制器函数将调用行中的下一个函数。为了简化控制器函数,我可能会将要调用的函数序列存储在Javascript对象中,因此控制器函数所做的只是查找和传递到中的下一个函数这种方法可以通过使用一个Javascript对象来简化,该对象始终是函数的参数(并且包含早期AJAX调用返回的所有数据)
例如:
var user={};
var currentState=1;
var someFunction=function(user){//stuff,它通过AJAX向用户添加数据,提升currentState,并将controllerFunction调用为callback};
var someOtherFunction=function(user){//stuff在这里对用户执行其他操作,提升当前状态,并调用controllerFunction作为callback}
var-functionSequence={1:someFunction,2:someOtherFunction}
var controllerFunction=函数(){
//根据当前状态从functionSequence中检索函数,并以用户作为参数调用它
}