var outerScopeVar;    
var img = document.createElement('img');

// Here we register the callback function.
img.onload = function() {
    // Code within this function will be executed once the image has loaded.
    outerScopeVar = this.width;
};

// But, while the image is loading, JavaScript continues executing, and
// processes the following lines of JavaScript.
img.src = 'lolcat.png';
alert(outerScopeVar);

var img = document.createElement('img');

img.onload = function() {
    var localScopeVar = this.width;
    alert(localScopeVar);
};

img.src = 'lolcat.png';

^{* 从技术上讲，您也可以使用eval()，但是}eval() 为此目的是邪恶的

如何让来电者等待？

您当前可能有一些与此类似的代码；

function getWidthOfImage(src) {
    var outerScopeVar;

    var img = document.createElement('img');
    img.onload = function() {
        outerScopeVar = this.width;
    };
    img.src = src;
    return outerScopeVar;
}

var width = getWidthOfImage('lolcat.png');
alert(width);

但是，我们现在知道返回outerScopeVar会立即发生；在 onload 回调函数更新变量之前。这会导致 getWidthOfImage() 返回 undefined，并发出警报 undefined。

要解决此问题，我们需要允许调用 getWidthOfImage() 的函数注册回调，然后将宽度警报移至该回调内；

function getWidthOfImage(src, cb) {     
    var img = document.createElement('img');
    img.onload = function() {
        cb(this.width);
    };
    img.src = src;
}

getWidthOfImage('lolcat.png', function (width) {
    alert(width);
});

...和以前一样，请注意，我们已经能够删除全局变量（在本例中为 width）。

点赞 +0

添加回复 关闭回复

P粉212114661

回复

• @Felix Kling 对“如何从异步调用返回响应？”的回答。请参阅他解释同步和异步流程的出色答案，以及“重组代码”部分。
  @Benjamin Gruenbaum 也投入了大量精力来解释同一线程中的异步性。

• @Matt Esch 对“从 fs.readFile 获取数据”的回答也很好地解释了异步性简单的方式。

当前问题的答案

让我们首先追踪常见的行为。在所有示例中，outerScopeVar 均在函数内部进行修改。该函数显然不会立即执行；它被分配或作为参数传递。这就是我们所说的回调。

现在的问题是，什么时候调用该回调？

这要看具体情况。让我们尝试再次追踪一些常见行为：

• img.onload 可能会在将来的某个时候调用（如果）图像已成功加载。
• setTimeout 可能会在延迟到期且超时尚未被 clearTimeout 取消后在将来的某个时间被调用。注意：即使使用 0 作为延迟，所有浏览器都有最小超时延迟上限（HTML5 规范中指定为 4 毫秒）。
• 当（并且如果）Ajax 请求已成功完成时，将来某个时候可能会调用 jQuery $.post 的回调。
• 当文件已成功读取或抛出错误时，Node.js 的 fs.readFile 可能会在将来的某个时候被调用。

在所有情况下，我们都有一个可能在将来某个时候运行的回调。这个“将来的某个时候”就是我们所说的异步流。

异步执行被推出同步流程。也就是说，当同步代码堆栈正在执行时，异步代码将永远执行。这就是JavaScript单线程的意义。

更具体地说，当 JS 引擎空闲时——不执行一堆（a）同步代码——它将轮询可能触发异步回调的事件（例如超时、收到网络响应）并执行它们又一个。这被视为事件循环。

也就是说，手绘红色形状中突出显示的异步代码只能在其各自代码块中的所有剩余同步代码执行完毕后才执行：

简而言之，回调函数是同步创建但异步执行的。在知道异步函数已执行之前，您不能依赖它的执行，如何做到这一点？

这真的很简单。依赖于异步函数执行的逻辑应该从该异步函数内部启动/调用。例如，将 alert 和 console.log 移至回调函数内将输出预期结果，因为结果在此时可用。

实现您自己的回调逻辑

通常，您需要对异步函数的结果执行更多操作，或者根据调用异步函数的位置对结果执行不同的操作。让我们来处理一个更复杂的例子：

var outerScopeVar;
helloCatAsync();
alert(outerScopeVar);

function helloCatAsync() {
    setTimeout(function() {
        outerScopeVar = 'Nya';
    }, Math.random() * 2000);
}

注意：我使用具有随机延迟的 setTimeout 作为通用异步函数；相同的示例适用于 Ajax、readFile、onload 和任何其他异步流。

这个示例显然与其他示例存在相同的问题；它不会等到异步函数执行。

让我们通过实现我们自己的回调系统来解决这个问题。首先，我们摆脱了那个丑陋的 outerScopeVar ，它在这种情况下完全没用。然后我们添加一个接受函数参数的参数，即我们的回调。当异步操作完成时，我们调用此回调并传递结果。实现（请按顺序阅读注释）：

// 1. Call helloCatAsync passing a callback function,
//    which will be called receiving the result from the async operation
helloCatAsync(function(result) {
    // 5. Received the result from the async function,
    //    now do whatever you want with it:
    alert(result);
});

// 2. The "callback" parameter is a reference to the function which
//    was passed as an argument from the helloCatAsync call
function helloCatAsync(callback) {
    // 3. Start async operation:
    setTimeout(function() {
        // 4. Finished async operation,
        //    call the callback, passing the result as an argument
        callback('Nya');
    }, Math.random() * 2000);
}

上述示例的代码片段：

// 1. Call helloCatAsync passing a callback function,
//    which will be called receiving the result from the async operation
console.log("1. function called...")
helloCatAsync(function(result) {
    // 5. Received the result from the async function,
    //    now do whatever you want with it:
    console.log("5. result is: ", result);
});

// 2. The "callback" parameter is a reference to the function which
//    was passed as an argument from the helloCatAsync call
function helloCatAsync(callback) {
    console.log("2. callback here is the function passed as argument above...")
    // 3. Start async operation:
    setTimeout(function() {
    console.log("3. start async operation...")
    console.log("4. finished async operation, calling the callback, passing the result...")
        // 4. Finished async operation,
        //    call the callback passing the result as argument
        callback('Nya');
    }, Math.random() * 2000);
}

点赞 +0

添加回复 关闭回复

P粉212114661

回复