为什么我的变量在函数内部修改后没有改变？- 异步代码参考

承苇

为什么要考虑以下示例outerScopeVar一切都是undefined？

var outerScopeVar;var img = document.createElement('img');img.onload = function()      outerScopeVar = this.width;};img.src = 'lolcat.png';alert(outerScopeVar);

var outerScopeVar;setTimeout(function()      outerScopeVar = 'Hello Asynchronous World!；alert(outerScopeVar);

// Example using some jQueryvar outerScopeVar;$.post('loldog',function(response)    outerScopeVar = response;});alert(outerScopeVar);

// Node.js examplevar outerScopeVar;fs.readFile('./catdog.html',function(err,data)    outerScopeVar = data;});console.log(outerScopeVar);

// with promisesvar outerScopeVar;myPromise.then(function (response)    outerScopeVar = response;});console.log(outerScopeVar);
2 q# s' E1 _% E0 l1 s, ?( m

// geolocation APIvar outerScopeVar;navigator.geolocation.getCurrentPosition(function (pos)    outerScopeVar = pos;});console.log(outerScopeVar);
! i1 U4 B% `3 R; }* G8 _1 M: I

为什么它会undefined输出所有这些例子？我不想要解决方案，我想知道为什么会这样。
3 P3 s# T! W, ~/ S1 Q注意：这是JavaScript 异步性标准问题。随意改进这一问题，并添加更简化的社区识别示例。
& d3 U. o' K; u' h2 S5 f                                                               
    解决方案:                                                               
0 Z7 }! d) k! z$ k& @                                                                让我们先跟踪常见的行为。在所有的例子中，outerScopeVar都在函数内部修改。显然，该函数不会立即执行，而是被分配或作为参数传输。这就是我们所说的*回调*。
现在的问题是什么时候调用回调？
  c( d: d+ B5 u. y0 M& r2 E这取决于情况。让我们再次尝试跟踪一些常见的行为：
img.onload可能会在未来当图像成功加载时，调用时间。
setTimeout可能会在将来的某个时间调用，延迟到期，超时未取消 clearTimeout。注：即使使用0作为延迟，所有浏览器也有最小的超时延迟上限（在 HTML5 规范指定 44ms）。
jQuery$.post的回调可能将来会有一个当(和如果)调用时间Ajax 请求成功完成时。
8 ]' ^$ K/ z- Q( r( o; S当文件成功读取或抛出错误时，Node.jsfs.readFile可能在未来的某个时候被调用。在所有情况下，我们都有可能在未来的某个时候操作回调。这个未来的某个时候就是我们所说的异步流。
& m) H7 D0 K* [2 V' q同步流程推出异步执行。换句话说，异步代码永远不会执行同步代码堆栈时执行。JavaScript 是单线程的含义。
更具体地说，当 JS 发动机空闲时间-不执行一堆（a）同步代码-它一个接一个地执行轮询可能触发异步回调的事件（如加班和接收网络响应）。这被视为事件循环。
) p$ I9 f6 o2 _" T+ ]+ x* N也就是说，手绘红色形状中突出的异步代码只能在其各自代码块中的所有剩余同步代码完成后执行：

简而言之，回调函数是同步创建但异步执行的。在你知道异步函数已经执行之前，你不能依赖它的执行，以及如何做到这一点？
这很简单，真的。依赖异步函数执行的逻辑应该从这个异步函数开始/调用。例如，在回调函数中移动alerts 和console.logs 输出预期结果，因为结果可用于此点。
实现自己的回调逻辑通常，您需要更多地操作异步函数的结果，或根据调用异步函数的位置执行不同的结果。让我们处理一个更复杂的例子：
, w6 i& V0 B/ s' F, T8 J" d. \7 ~[code]var outerScopeVar;helloCatAsync();alert(outerScopeVar);function helloCatAsync()      setTimeout(function()          outerScopeVar = 'NyaMath.random() * 2000)code]注意：我使用setTimeout同样的例子适用于 Ajax readFile、onload还有其他异步流。
; u3 S2 N1 }1 O* \$ o% G; K这个例子显然和其他例子有同样的问题，它不会等到异步函数执行。
# o- K0 h1 W5 F$ Q5 w: ?) n让我们解决它，实现我们自己的回调系统。首先，我们摆脱了outerScopeVar在这种情况下，完全无用的丑陋。然后我们添加一个接受函数参数的参数，我们的回调。当异步操作完成时，我们调用此回调传输结果。实现（请按顺序阅读评论）：
* J0 o3 I7 {4 D+ ?[code]// 1. Call helloCatAsync passing a callback function,//   which will be called receiving the result from the async operationhelloCatAsync(function(result)     . 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 argument from the helloCatAsync callfunction helloCatAsync(callback)      . Start async operation:    setTimeout(function() {        // 4. Finished async operation,                            call the callback passing the result as argument        callback('NyaMath.random() * 2000)code]上述例子的代码片段：
) W5 }  Y/ b9 i[code]// 1. Call helloCatAsync passing a callback function,//   which will be called receiving the result from the async operationconsole.log("1. function called...")helloCatAsync(function(result)     . 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 argument from the helloCatAsync callfunction 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...")    . Finished async operation,     call the callback passing the result as argument        callback('NyaMath.random() * 2000)code]在大多数情况下，在实际用例中，DOM API 和大多数数都提供了回调功能（helloCatAsync本示例中的实现)。您只需要传输回调函数并理解它将在同步流之外执行，并重构代码以适应它。
4 q% _- O- x( U3 |: @你还会注意到，由于异步的性质，不可能return异步流中的值返回到定义回调的同步流，因为异步回调只有在同步代码完成并执行后才执行。
, K$ Z  J! r9 j不是return要从异步回调中获得值，您必须使用回调模式或…承诺。可能好和有帮助！