首頁猿問為什么我的變量在函數(shù)內(nèi)部修改后沒有...

為什么我的變量在函數(shù)內(nèi)部修改后沒有變化？ - 異步代碼引用

JavaScript Vue.js Node.js

拉丁的傳說 2019-05-20 15:19:02

鑒于以下示例，為什么outerScopeVar在所有情況下都未定義？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!';}, 0);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);// geolocation APIvar outerScopeVar;navigator.geolocation.getCurrentPosition(function (pos) { outerScopeVar = pos;});console.log(outerScopeVar);為什么undefined在所有這些例子中輸出？我不想要解決方法，我想知道為什么會這樣。

查看完整描述

3 回答

吃雞游戲

TA貢獻1829條經(jīng)驗獲得超7個贊

對于正在尋找快速參考的人以及使用promises和async / await的一些示例，這里有一個更簡潔的答案。

對于調(diào)用異步方法（在本例中setTimeout）并返回消息的函數(shù)，從樸素方法（不起作用）開始：

function getMessage() {
  var outerScopeVar;
  setTimeout(function() {
    outerScopeVar = 'Hello asynchronous world!';
  }, 0);
  return outerScopeVar;}console.log(getMessage());

undefined在這種情況下記錄，因為getMessage在setTimeout調(diào)用回調(diào)之前返回并更新outerScopeVar。

解決它的兩種主要方法是使用回調(diào)和承諾：

回調(diào)

這里的更改是getMessage接受一個callback參數(shù)，該參數(shù)將被調(diào)用以在可用時將結果傳遞回調(diào)用代碼。

function getMessage(callback) {
  setTimeout(function() {
    callback('Hello asynchronous world!');
  }, 0);}getMessage(function(message) {
  console.log(message);});

承諾

Promise提供了一種比回調(diào)更靈活的替代方案，因為它們可以自然地組合起來協(xié)調(diào)多個異步操作。甲承諾/ A +標準實現(xiàn)天然地在node.js中（0.12+）和許多當前瀏覽器提供的，而是在像庫還實現(xiàn)藍鳥和Q。

function getMessage() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Hello asynchronous world!');
    }, 0);
  });}getMessage().then(function(message) {
  console.log(message);  });

jQuery Deferreds

jQuery提供的功能類似于Deferreds的promises。

function getMessage() {
  var deferred = $.Deferred();
  setTimeout(function() {
    deferred.resolve('Hello asynchronous world!');
  }, 0);
  return deferred.promise();}getMessage().done(function(message) {
  console.log(message);  });

異步/ AWAIT

如果您的JavaScript環(huán)境包括支持async和await（如Node.js的7.6+），那么你就可以在同步使用承諾async的功能：

function getMessage () {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve('Hello asynchronous world!');
        }, 0);
    });}async function main() {
    let message = await getMessage();
    console.log(message);}main();

反對回復 2019-05-20