chi*_*org 6 javascript ajax jquery callback
我继承了JavaScript代码,其中Ajax处理程序的成功回调启动另一个Ajax调用,其中成功回调可能会也可能不会启动另一个Ajax调用.这导致了深层嵌套的匿名函数.也许有一个聪明的编程模式,避免深度嵌套,更干.此外,还存在整个函数中使用的内部变量myVar1和myVar2的问题.
jQuery.extend(Application.Model.prototype, {
process: function() {
var myVar1;
// processing using myVar1;
jQuery.ajax({
url:myurl1,
dataType:'json',
success:function(data) {
var myVar2;
// process data using myVar1, set state of myVar2,
// then send it back
jQuery.ajax({
url:myurl2,
dataType:'json',
success:function(data) {
// do stuff with myVar1 and myVar2
if(!data.ok) {
jQuery.ajax({
url:myurl2,
dataType:'json',
success:mycallback
});
}
else {
mycallback(data);
}
}
});
}
});
}
});
Run Code Online (Sandbox Code Playgroud)
感谢链接提示和此评论,我得出了以下解决方案。我已经测试过它并且有效。可能存在一些范围问题,您可以从中重构一个通用的 ChainAjax 类。但就目前而言,这还可以。
jQuery.extend(MyApplication.Model.prototype, {
process: function() {
// private class for executing the Ajax calls
var myAjaxCalls = function(options) {
this.options = options;
this.myVar1 = null;
this.myVar2 =null;
}
jQuery.extend(myAjaxCalls.prototype, {
process1:function(data) {
// processsing using this.myVar1
this.myVar1 = 5;
return true;
},
process2:function(data) {
this.myVar2 = 6;
if(data.ok) {
mycallback(data);
}
else {
return true;
}
},
process3:function(data) {
// Process this.myVar1 and this.myVar
mycallback(data);
return false;
},
chainAjax:function() {
if(this.options.length > 0) {
var opt = this.options.shift();
var that = this;
jQuery.ajax({
url:opt.url,
success:function(data) {
if(that[opt.callback](data)) {
that.chainAjax();
}
}
});
}
}
});
// End private class
var calls = new myAjaxCalls([
{url:'http://localhost/', callback:'process1'},
{url:'http://localhost/', callback:'process2'},
{url:'http://localhost/', callback:'process3'}
]);
calls.chainAjax();
}
});
Run Code Online (Sandbox Code Playgroud)
更新:我发现这个很好的演示文稿还涉及有用的编程模式和最佳实践。
2012 更新:与此同时,有几个库可用于使用异步函数模拟同步流程:q、stratified.js和Streamline.js
| 归档时间: |
|
| 查看次数: |
2435 次 |
| 最近记录: |