javascript - this.async() 在 JavaScript 中做了什么

Question

一直在代码中看到这种模式，但在 google 或 SO 中找不到任何对它的引用，奇怪。有人可以指点我参考 this.async() 函数吗？

  var done = this.async();
  // ...
  $.get(path, function(contents) { // or some other function with callback
    // ...
    done(JST[path] = tmpl);
  })

Answer 1

var done = this.async()并且done(blah)是返回从$.get同步函数中的异步调用（例如）获取的值的巧妙技巧。

让我们看一个例子：

var getText = function() {
  return "hello";
};
var text = getText();

这是一个非常简单的函数调用，所以这里没有谜题。但是，如果您需要在 getText() 函数中异步获取文本怎么办？

var getText = function() {
  return $.get('<some-url>', function(text) {
    return text;
  });  // ??????
};

调用getText()不会返回您想要获取的文本。它返回 jquery 的 promise 对象。

那么我们如何返回它从调用getText()中获得的文本呢？$.get()

var getText = function() {
  var done = this.async();
  $.get('<some-url>', function(text) {
    done(text);
  });
};
var text = getText();  // you get the expected text

魔术，对吧？

我还不知道this.async()call 的内部工作。我不知道是否有一个库提供了该功能，但是您可以看到 Backbone.LayoutManager 使用了这个技巧https://github.com/tbranyen/backbone.layoutmanager/blob/master/backbone.layoutmanager.js（搜索对于 this.async)。

另外，Tim Branyen（主干 layoutmanager 的作者）在他的视频教程（http://vimeo.com/32765088大约 14:00 - 15:00）中简要介绍了它。在视频中，蒂姆说本·阿尔曼想出了这个把戏。看看这个https://github.com/cowboy/javascript-sync-async-foreach

我认为混合异步和同步功能是一个非常巧妙的技巧。

干杯，

Answer 2

var done = this.async()是 Grunt 中用于帮助在任务中执行异步功能的模式。

您需要调用done()或done(returnValues)告诉 Grunt 任务已完成（在您的异步任务链之后）。

阅读更多相关信息： https ://gruntjs.com/inside-tasks#inside-all-tasks

Answer 3

这是一种解决this内部回调转义问题的方法。如果没有这个额外的引用，代码将如下所示：

$.get(path, function(contents) { // or some other function with callback
  //Wrong! `this` might no longer point to your object
  this.done(JST[path] = tmpl);
})

很遗憾！this内部响应回调与this外部不同。事实上，它可以是任何东西，这取决于$.get（调用回调使用）决定它是什么。大多数人使用that出于相同目的命名的额外参考：

var that = this;
// ...
$.get(path, function(contents) { // or some other function with callback
  // ...
  that.async(JST[path] = tmpl);
})

这种模式似乎也合理且可读。

哦，如果您对这种语法感到好奇：

done(JST[path] = tmpl)

这是用作表达式的赋值。赋值的值是右手边，所以这段代码等价于：

JST[path] = tmpl;
done(tmpl);