Javascript 异步赋值和回调

Question

我确信有一种简单的方法可以做到这一点，但我很难完全理解异步调用及其流程。我正在尝试在 javascript 中做一个简单的赋值语句，然后设置一个计时器在该对象被赋值后对其执行操作。我有一些类似的东西：

var info = getInfo();
$timeout(updateInfo(info), 5000);

但是，我不希望在最初设置信息之前执行超时。我已经尝试研究使用 .then 或某种形式的回调，但我还没有成功地确定如何做到这一点。我不确定是否在 updateInfo 调用中使用 info 参数使得我无法在 getInfo 中使用回调或正确的流程是什么。我读过其他文章和堆栈溢出响应，但找不到处理异步分配然后在后续调用中将其用作参数的文章。

getInfo 和 updateInfo 是 return Highcharts 图形配置对象的方法。无需复制所有具体细节：

getInfo: function() {
  return {
    options: {
      chart: {
        type: 'line'
      }
    }
    ...
  }
}

updateInfo: function(info) {
  // Here computations are performed on plot series data.
  info.series.push(...)
}

Answer 1

你应该记住，虽然 JavaScript 做了一些异步操作，但是对变量的赋值是同步的，这意味着它发生在你请求它的那一刻，并且不会继续下去下一行直到完成。

如果getInfo本身在范围内有变量信息并在异步调用期间更新它，那么你不应该在函数调用时给它赋值。

如果我让你感到困惑，让我猜猜你在那里做了什么（请提供 getInfo 函数来澄清你的问题）。

我很确定 getInfo 所做的是 ajax 调用。所以如果你已经使用了 jQuery，你可以简单地使用他们的 ajax 函数：

function getInfo(){
    $.ajax({
      url: "/api/items"
    }).done(updateInfo);
}

function updateInfo(data){
      console.log ('Do something with', data);
}

getInfo();

查看完整文档： http://api.jquery.com/jquery.ajax/

Answer 2

getInfo 和 updateInfo 在我看来都非常同步。所以应该不会有任何同步问题。

我唯一注意到的是在您的示例中错误地使用了 $timeout。 $timeout(updateInfo(info), 5000);这样updateInfo会在超时开始前调用，返回值会作为参数传递。

为了在 5 秒后调用 updateInfo，您必须使用匿名函数或 bind 函数。

$timeout(function() { updateInfo(info); }, 5000);

$timeout(updateInfo.bind(null, info), 5000);

有关 bind 的更多信息。

Javascript 异步赋值和回调

Javascript asynchronous assignment and callback

javascript

asynchronous

callback

variable-assignment