Question

我似乎无法协调javascript执行顺序的技术流程和回调的概念。我一直在使用回调，但我对执行流程感到不安，因为看起来回调的概念和顺序javascript执行之间存在矛盾。这个链接http://cwbuecheler.com/web/tutorials/2013/javascript-callbacks/解释了回调并给出了示例，但是当我遵循代码时，我看到了一个矛盾。

getData('http://fakedomain1234.com/userlist', writeData);

document.getElementById('output').innerHTML += "show this before data ...";

function getData(dataURI, callback) {
    var myData = getSomeData(); // fake function
    callback(myData);
}

function writeData(myData) {
    document.getElementById('output').innerHTML += myData;
}

我的问题/观察是在函数getData内部，callback(myData)语句直到函数getSomeData()完成后才会执行，并将值返回给变量{{1但是，当myData函数调用完成执行之前允许执行document.getElementById...语句时，会发生矛盾。

我错过了什么吗？

TIA

Answer 1

除非document.getElementById是异步的，否则在getData完全执行之前无法执行{p> getData。通过查看传递给getData的URL告诉我你正在进行异步的AJAX。

虽然你的代码不会像你说的那样（它是同步的！），因为var myData = getSomeData()是同步的，假装整个getData函数是异步的，流程是这样的：

执行getData。
getData执行内部操作并返回undefined。
继续document.getElementById。
稍后getData获取其数据，浏览器或其他环境执行之前传递给它的回调函数。
执行writeData内的陈述。

有许多方法可以创建异步功能，例如events，AJAX和其他timers（setTimeout/Interval）。

Answer 2

同步与异步执行

我认为你把这两件事搞得一团糟。我将在下面引用并纠正你：

callback(myData)语句直到函数getSomeData()
之后才会执行

正确。这是同步（逐行）执行。

允许document.getElementById...语句在getData函数调用执行完毕之前执行。

不正确。同样，这是同步执行 - 数据后将插入。

您可能会考虑在异步执行的上下文中进行回调。将您的同步代码与此异步版本进行比较，在'show this before...'的内容之前插入'show this ...'：

myData

更改位于getData('http://fakedomain1234.com/userlist', writeData); document.getElementById('output').innerHTML += "show this before data ..."; function getData(dataURI, callback) { //var myData = getSomeData(); //callback(myData); getSomeDataAsync(callback); } function writeData(myData) { document.getElementById('output').innerHTML += myData; }函数中。 getData 作为参数传递，而不是立即使用callback运算符调用。

()函数是异步的，这意味着它会在执行getSomeDataAsync回调之前在运行循环的“背景”中弹出。在等待触发的事件（即数据检索完成时）之前，它不会运行回调。当myData正在等待时，会在调用它的代码上继续执行，这会立即插入getSomeDataAsync。

当完成事件触发时，将继续执行，并且将执行传递的'show this before...'参数。然后会附加callback的内容！

Check out this fiddle to see what I mean

用于回调的javascript代码执行序列和与正常执行序列的矛盾

2 个答案:

同步与异步执行