Javascript並沒有等待返回值

Question

一直認爲JavaScript不是異步的，除非使用Ajax或其他東西。我沒有使用Ajax調用或什麼，但我的JS功能似乎不等待返回值：

我有三行代碼如下：

var areas = prepareComparer(); 
console.log('Areas'); 
console.log(areas); 

我需要創建一個疊加的div起訴以下功能：

function prepareComparer() { 
    var comparorSelection = d3.select('body').append('div').attr('id', 'comparor').attr('style', 'line-height: 100px;position: fixed;top: 5%; left:5%;background-color: white;border-radius: 5px;text-align: center;z-index: 2;border-style:solid;border-width:1px;box-shadow: 10px 10px 5px #888888') 
     .transition().duration(500).style('height', '800px').style('width', $(window).width() * .9 + 'px').style('opacity', '1').each('end', function() { 
      //Waiting for end of transition to append the comparees: Otherwise, causes size adjustment problems since comparee sizes depend on the FULL height. 
      d3.select('#comparor').append('div').attr('id', 'comparee1').attr('style', 'position:absolute;top:0px;left:0px;width:' + $('#comparor').width() * .45 + 'px;height:' + $('#comparor').height() + 'px') 
      .append('svg'); 
      d3.select('#comparor').append('div').attr('id', 'comparee2').attr('style', 'position:absolute;top:0px;left:' + $('#comparor').width() * .5 + 'px;width:' + $('#comparor').width() * .45 + 'px;height:' + $('#comparor').height() + 'px') 
      .append('svg'); 
      d3.select('#comparor').append('div').attr('id', 'destroyComparor').text('Click Here To Go Back').on('click', function() { 
       d3.select('#comparor').transition().duration(500).style('width', '0px').style('height', '0px').style('opacity', '0').remove(); 
      }); 
     }); 
    setTimeout(function() { console.log("Hello"); return ['#comparor #comparee1', '#comparor #comparee2'] }, 5000); 
} 

現在，對於這一點，我的日誌顯示爲：

Areas 
undefined 
Hello 

免疫球蛋白不知道D3代碼，因爲評論或取消註釋似乎沒有太大區別。可以肯定的是，我引入了5秒的超時時間。所以，5秒後我收到消息Hello，這意味着在此之後也可能發生返回。我幾乎立即得到未定義的消息。

我不確定爲什麼會發生這種情況，並且一直在試圖對此進行解碼。誰能幫忙？

編輯

想回到在代碼新的div創建（＃comparee1和＃comparee2）完成數據。但是，由於d3轉換是異步的，所以引入了延遲。而且由於新的div只在轉換完成之後才創建（有大小依賴關係），新創建的div不能立即被我的主函數選中。

解決了這個問題，使用JavaScript承諾：

function prepareComparer() { 
    promise = new Promise(function (resolve, reject) { 
     var comparorSelection = d3.select('body').append('div').attr('id', 'comparor').attr('style', 'line-height: 100px;position: fixed;top: 5%; left:5%;background-color: white;border-radius: 5px;text-align: center;z-index: 2;border-style:solid;border-width:1px;box-shadow: 10px 10px 5px #888888') 
     .transition().duration(500).style('height', '800px').style('width', $(window).width() * .9 + 'px').style('opacity', '1').each('end', function() { 
      //Waiting for end of transition to append the comparees: Otherwise, causes size adjustment problems since comparee sizes depend on the FULL height. 
      d3.select('#comparor').append('div').attr('id', 'comparee1').attr('style', 'position:absolute;top:0px;left:0px;width:' + $('#comparor').width() * .45 + 'px;height:' + $('#comparor').height() + 'px') 
      .append('svg'); 
      d3.select('#comparor').append('div').attr('id', 'comparee2').attr('style', 'position:absolute;top:0px;left:' + $('#comparor').width() * .5 + 'px;width:' + $('#comparor').width() * .45 + 'px;height:' + $('#comparor').height() + 'px') 
      .append('svg'); 
      d3.select('#comparor').append('div').attr('id', 'destroyComparor').text('Click Here To Go Back').on('click', function() { 
       d3.select('#comparor').transition().duration(500).style('width', '0px').style('height', '0px').style('opacity', '0').remove(); 
      }); 
      resolve(['#comparor #comparee1', '#comparor #comparee1']); 
     }); 
    }); 
} 

，並使用數據的功能將被稱爲：

promise.then(function (response) { 
    window[func](response[0], res, 'label', 'value'); 
}); 

只是想分享的解決方案。

Answer 1

你的功能prepareComparer()沒有返回。在沒有返回的JavaScript函數中返回undefined。

setTimeout()中的回報與prepareComparer()無關。

在這裏，您還發現除了Ajax之外的另一個JavaScript異步編程方面。

Answer 2

把之前的setTimeout原因函數返回將等待設置timout完成

這個樣子的

return setTimeout(function() { console.log("Hello"); return ['#comparor #comparee1', '#comparor #comparee2'] }, 5000); 

抱歉，不工作，但你有沒有回報領域將始終undifined。

的異步問題traceur.js引入等待關鍵字，可能會是有用的，你