这是我关于stackoverflow的第一篇文章，所以如果我遇到像一个完全笨蛋或者我无法让自己完全清楚，请不要太过刻板。 ： - ）
这是我的问题：我正在尝试编写一个javascript函数，通过检查第一个函数的完成然后执行第二个函数将两个函数“绑定”到另一个函数。
对此的简单解决方案显然是编写一个元函数，在其范围内调用两个函数。但是，如果第一个函数是异步的（特别是一个AJAX调用）而第二个函数需要第一个函数的结果数据，那就根本不起作用。
我对解决方案的想法是给第一个函数一个“标志”，即一旦调用它就创建一个公共属性“this.trigger”（初始化为“0”，在完成时设置为“1”） ;这样做可以使另一个函数检查标志的值（[0,1]）。如果满足条件（“trigger == 1”），则应调用第二个函数。
以下是我用于测试的抽象示例代码：
<script type="text/javascript" >
/**/function cllFnc(tgt) { //!! first function
this.trigger = 0 ;
var trigger = this.trigger ;
var _tgt = document.getElementById(tgt) ; //!! changes the color of the target div to signalize the function's execution
_tgt.style.background = '#66f' ;
alert('Calling! ...') ;
setTimeout(function() { //!! in place of an AJAX call, duration 5000ms
trigger = 1 ;
},5000) ;
}
/**/function rcvFnc(tgt) { //!! second function that should get called upon the first function's completion
var _tgt = document.getElementById(tgt) ; //!! changes color of the target div to signalize the function's execution
_tgt.style.background = '#f63' ;
alert('... Someone picked up!') ;
}
/**/function callCheck(obj) {
//alert(obj.trigger ) ; //!! correctly returns initial "0"
if(obj.trigger == 1) { //!! here's the problem: trigger never receives change from function on success and thus function two never fires
alert('trigger is one') ;
return true ;
} else if(obj.trigger == 0) {
return false ;
}
}
/**/function tieExc(fncA,fncB,prms) {
if(fncA == 'cllFnc') {
var objA = new cllFnc(prms) ;
alert(typeof objA + '\n' + objA.trigger) ; //!! returns expected values "object" and "0"
}
//room for more case definitions
var myItv = window.setInterval(function() {
document.getElementById(prms).innerHTML = new Date() ; //!! displays date in target div to signalize the interval increments
var myCallCheck = new callCheck(objA) ;
if( myCallCheck == true ) {
if(fncB == 'rcvFnc') {
var objB = new rcvFnc(prms) ;
}
//room for more case definitions
window.clearInterval(myItv) ;
} else if( myCallCheck == false ) {
return ;
}
},500) ;
}
</script>
用于测试的HTML部分：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd >
<html>
<head>
<script type="text/javascript" >
<!-- see above -->
</script>
<title>
Test page
</title>
</head>
<body>
<!-- !! testing area -->
<div id='target' style='float:left ; height:6em ; width:8em ; padding:0.1em 0 0 0; font-size:5em ; text-align:center ; font-weight:bold ; color:#eee ; background:#fff;border:0.1em solid #555 ; -webkit-border-radius:0.5em ;' >
Test Div
</div>
<div style="float:left;" >
<input type="button" value="tie calls" onmousedown="tieExc('cllFnc','rcvFnc','target') ;" />
</div>
<body>
</html>
我很确定这是javascript范围的一些问题，因为我已经检查了触发器是否正确设置为“1”并且确实如此。很可能“checkCall（）”函数没有收到更新的对象，而只是通过将“this.trigger”设置为“1”来检查它的旧实例，这显然从不标记完成。如果是这样，我不知道如何解决这个问题。
无论如何，希望有人对这种特殊问题有一个想法或经验。
感谢阅读！
FK
答案 0 :(得分：8)
您可以利用JS的一个名为closure的功能。将它与一个非常常见的JS模式结合起来，称为“延续传递风格”，你就有了解决方案。 （这些都不是JS的原创，但在JS中大量使用）。
// a function
function foo(some_input_for_foo, callback)
{
// do some stuff to get results
callback(results); // call our callback when finished
}
// same again
function bar(some_input_for_bar, callback)
{
// do some stuff to get results
callback(results); // call our callback when finished
}
“延续传递风格”是指回调。每个函数都调用一个回调（延续）并给它结果，而不是返回一个值。
然后你可以轻松地将两者结合在一起：
foo(input1, function(results1) {
bar(results1, function(results2) {
alert(results2);
});
});
嵌套的匿名函数可以“看到”它们所在范围内的变量。因此不需要使用特殊属性来传递信息。
<强>更新
澄清一下，在你的问题的代码片段中，很明显你的想法大致是这样的：
我有一个长时间运行的异步 操作，所以我需要知道什么时候 完成以便开始下一个 操作。所以我需要做到这一点 州作为财产可见。然后 我可以在其他地方跑， 反复检查该财产 看它何时变为“已完成” 状态，所以我知道什么时候继续。
（然后作为一个复杂的因素，循环必须使用setInterval开始运行并clearInterval退出，以允许其他JS代码运行 - 但它基本上是一个“轮询循环” ）。
你不需要这样做！
不要让你的第一个函数在完成时设置属性，而是让它调用一个函数。
为了清楚地说明这一点，让我们重构原始代码：
function cllFnc(tgt) { //!! first function
this.trigger = 0 ;
var trigger = this.trigger ;
var _tgt = document.getElementById(tgt) ; //!! changes the color...
_tgt.style.background = '#66f' ;
alert('Calling! ...') ;
setTimeout(function() { //!! in place of an AJAX call, duration 5000ms
trigger = 1 ;
},5000) ;
}
[更新2 ：顺便说一句，那里有一个错误。您将trigger属性的当前值复制到名为trigger的新局部变量中。然后在结束时为该局部变量赋值1。没有人能够看到这一点。局部变量是函数的私有变量。 但是你无论如何也不需要这样做，所以继续阅读...... ]
我们要做的就是告诉该函数在完成后要调用什么，并摆脱属性设置：
function cllFnc(tgt, finishedFunction) { //!! first function
var _tgt = document.getElementById(tgt) ; //!! changes the color...
_tgt.style.background = '#66f' ;
alert('Calling! ...') ;
setTimeout(function() { //!! in place of an AJAX call, duration 5000ms
finishedFunction(); // <-------- call function instead of set property
},5000) ;
}
现在无需进行“通话检查”或您的特殊tieExc帮助。您可以使用非常少的代码轻松地将两个函数绑定在一起。
var mySpan = "#myspan";
cllFnc(mySpan, function() { rcvFnc(mySpan); });
这样做的另一个好处是我们可以将不同的参数传递给第二个函数。使用您的方法，相同的参数将传递给两者。
例如，第一个函数可能会对AJAX服务进行几次调用（为简洁起见使用jQuery）：
function getCustomerBillAmount(name, callback) {
$.get("/ajax/getCustomerIdByName/" + name, function(id) {
$.get("/ajax/getCustomerBillAmountById/" + id), callback);
});
}
此处，callback接受客户账单金额，并且AJAX get调用将收到的值传递给我们传递的函数，因此callback已经兼容，因此可以直接充当第二个AJAX调用的回调。所以这本身就是一个将两个异步调用按顺序连接在一起并将它们包含在（从外部）出现的单个异步函数的示例。
然后我们可以用另一个操作链接它：
function displayBillAmount(amount) {
$("#billAmount").text(amount);
}
getCustomerBillAmount("Simpson, Homer J.", displayBillAmount);
或者我们可以（再次）使用匿名函数：
getCustomerBillAmount("Simpson, Homer J.", function(amount) {
$("#billAmount").text(amount);
});
因此，通过链接这样的函数调用，每个步骤都可以在信息可用时立即将信息传递到下一步。
通过使函数在完成后执行回调，您可以免除内部每个函数的工作限制。它可以做AJAX调用，定时器等等。只要向前传递“延续”回调，就可以有任意数量的异步工作层。
基本上，在异步系统中，如果你发现自己编写了一个循环来检查变量并找出它是否已经改变了状态，那么某些地方就出现了问题。相反，应该有一种方法来提供一个在状态改变时调用的函数。
更新3
我在评论的其他地方看到你提到实际问题是缓存结果，所以我所有解释这个的工作都是浪费时间。这是你应该提出的问题。
更新4
最近我写了a short blog post on the subject of caching asynchronous call results in JavaScript。
（更新4结束）
分享结果的另一种方法是为一个回调提供一种方式，以“广播”或“发布”给多个订阅者：
function pubsub() {
var subscribers = [];
return {
subscribe: function(s) {
subscribers.push(s);
},
publish: function(arg1, arg2, arg3, arg4) {
for (var n = 0; n < subscribers.length; n++) {
subscribers[n](arg1, arg2, arg3, arg4);
}
}
};
}
所以：
finished = pubsub();
// subscribe as many times as you want:
finished.subscribe(function(msg) {
alert(msg);
});
finished.subscribe(function(msg) {
window.title = msg;
});
finished.subscribe(function(msg) {
sendMail("admin@mysite.com", "finished", msg);
});
然后让一些慢速操作发布其结果：
lookupTaxRecords("Homer J. Simpson", finished.publish);
当一个呼叫结束时，它现在将呼叫所有三个用户。
答案 1 :(得分：5)
对此问题的明确答案是“当你准备就绪时给我打电话”问题是回调。回调基本上是您分配给对象属性的函数（如“onload”）。当对象状态改变时，调用该函数。例如，此函数对给定的URL发出ajax请求，并在完成时发出尖叫声：
function ajax(url) {
var req = new XMLHttpRequest();
req.open('GET', url, true);
req.onreadystatechange = function (aEvt) {
if(req.readyState == 4)
alert("Ready!")
}
req.send(null);
}
当然，这还不够灵活，因为我们可能希望针对不同的ajax调用采取不同的操作。幸运的是，javascript是一种函数式语言，因此我们可以简单地将所需的操作作为参数传递：
function ajax(url, action) {
var req = new XMLHttpRequest();
req.open('GET', url, true);
req.onreadystatechange = function (aEvt) {
if(req.readyState == 4)
action(req.responseText);
}
req.send(null);
}
第二个功能可以像这样使用：
ajax("http://...", function(text) {
do something with ajax response
});
根据评论，这里有一个如何在对象中使用ajax的例子
function someObj()
{
this.someVar = 1234;
this.ajaxCall = function(url) {
var req = new XMLHttpRequest();
req.open('GET', url, true);
var me = this; // <-- "close" this
req.onreadystatechange = function () {
if(req.readyState == 4) {
// save data...
me.data = req.responseText;
// ...and/or process it right away
me.process(req.responseText);
}
}
req.send(null);
}
this.process = function(data) {
alert(this.someVar); // we didn't lost the context
alert(data); // and we've got data!
}
}
o = new someObj;
o.ajaxCall("http://....");
这个想法是在事件处理程序中“关闭”（别名）“this”，以便可以进一步传递。
答案 2 :(得分：1)
欢迎来到SO！顺便说一句，你是一个完全不知情的人，你的问题完全不清楚：）
这是基于@Daniel使用continuation的答案。这是一个将多个方法链接在一起的简单函数。就像管道|在unix中的工作方式非常相似。它需要一组函数作为其顺序执行的参数。每个函数调用的返回值作为参数传递给下一个函数。
function Chain() {
var functions = arguments;
return function(seed) {
var result = seed;
for(var i = 0; i < functions.length; i++) {
result = functions[i](result);
}
return result;
}
}
要使用它，请从Chained创建一个对象，将所有函数作为参数传递。您可以test on fiddle的一个例子是：
var chained = new Chain(
function(a) { return a + " wo"; },
function(a) { return a + "r"; },
function(a) { return a + "ld!"; }
);
alert(chained('hello')); // hello world!
要将其与AJAX请求一起使用，请将链式函数作为成功回调传递给XMLHttpRequest。
var callback = new Chain(
function(response) { /* do something with ajax response */ },
function(data) { /* do something with filtered ajax data */ }
);
var req = new XMLHttpRequest();
req.open('GET', url, true);
req.onreadystatechange = function (aEvt) {
if(req.readyState == 4)
callback(req.responseText);
}
req.send(null);
重要的是每个函数都取决于前一个函数的输出，所以你必须在每个阶段返回一些值。
这只是一个建议 - 负责检查数据是否在本地可用或必须进行HTTP请求会增加系统的复杂性。相反，您可以拥有一个不透明的请求管理器，就像您拥有的metaFunction一样，并让它决定是在本地还是远程提供数据。
这是一个sample Request object来处理这种情况，而没有任何其他对象或函数知道数据的来源：
var Request = {
cache: {},
get: function(url, callback) {
// serve from cache, if available
if(this.cache[url]) {
console.log('Cache');
callback(this.cache[url]);
return;
}
// make http request
var request = new XMLHttpRequest();
request.open('GET', url, true);
var self = this;
request.onreadystatechange = function(event) {
if(request.readyState == 4) {
self.cache[url] = request.responseText;
console.log('HTTP');
callback(request.responseText);
}
};
request.send(null);
}
};
要使用它，您可以调用Request.get(..)，如果可用则返回缓存数据，否则进行AJAX调用。如果您正在寻找对缓存的精细控制，可以传递第三个参数来控制缓存数据的时间。
Request.get('<url>', function(response) { .. }); // HTTP
// assuming the first call has returned by now
Request.get('<url>', function(response) { .. }); // Cache
Request.get('<url>', function(response) { .. }); // Cache
答案 3 :(得分：1)
我已经解决了，现在看起来效果非常好。在我将其整理出来后，我会稍后发布我的代码。在此期间，非常感谢您的帮助！
<强>更新
尝试使用Webkit（Safari，Chrome），Mozilla和Opera中的代码。似乎工作得很好。期待任何回复。
更新2
我改变了tieExc（）方法来集成Anurag的链式函数调用语法。现在，您可以通过将它们作为参数传递，在完成检查时调用任意数量的函数。
如果您不想阅读代码，请尝试：http://jsfiddle.net/UMuj3/（顺便说一句，JSFiddle是一个非常简洁的网站！）。
JS-代码：
/**/function meta() {
var myMeta = this ;
/** **/this.cllFnc = function(tgt,lgt) { //!! first function
this.trigger = 0 ; //!! status flag, initially zero
var that = this ; //!! required to access parent scope from inside nested function
var _tgt = document.getElementById(tgt) ; //!! changes the color of the target div to signalize the function's execution
_tgt.style.background = '#66f' ;
alert('Calling! ...') ;
setTimeout(function() { //!! simulates longer AJAX call, duration 5000ms
that.trigger = 1 ; //!! status flag, one upon completion
},5000) ;
} ;
/** **/this.rcvFnc = function(tgt) { //!! second function that should get called upon the first function's completion
var _tgt = document.getElementById(tgt) ; //!! changes color of the target div to signalize the function's execution
_tgt.style.background = '#f63' ;
alert('... Someone picked up!') ;
} ;
/** **/this.callCheck = function(obj) {
return (obj.trigger == 1) ? true
: false
;
} ;
/** **/this.tieExc = function() {
var functions = arguments ;
var myItv = window.setInterval(function() {
document.getElementById('target').innerHTML = new Date() ; //!! displays date in target div to signalize the interval increments
var myCallCheck = myMeta.callCheck(functions[0]) ; //!! checks property "trigger"
if(myCallCheck == true) {
clearInterval(myItv) ;
for(var n=1; n < functions.length; n++) {
functions[n].call() ;
}
} else if(myCallCheck == false) {
return ;
}
},100) ;
} ;
}
HTML ：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd >
<html>
<head>
<script type='text/javascript' >
<!-- see above -->
</script>
<title>
Javascript Phased Execution Test Page
</title>
</head>
<body>
<div id='target' style='float:left ; height:7.5em ; width:10em ; padding:0.5em 0 0 0; font-size:4em ; text-align:center ; font-weight:bold ; color:#eee ; background:#fff;border:0.1em solid #555 ; -webkit-border-radius:0.5em ;' >
Test Div
</div>
<div style="float:left;" >
<input type="button" value="tieCalls()" onmousedown="var myMeta = new meta() ; var myCll = new myMeta.cllFnc('target') ; new myMeta.tieExc(myCll, function() { myMeta.rcvFnc('target') ; }, function() { alert('this is fun stuff!') ; } ) ;" /><br />
</div>
<body>
</html>
答案 4 :(得分：0)
一个非常简单的解决方案是让你的第一个ajax调用同步。这是可选参数之一。