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

What does this.async() do in JavaScript

本文关键字:什么 JavaScript async this      更新时间:2023-09-26

一直在代码中看到这种模式,但在谷歌或SO中找不到任何对它的引用,很奇怪。有人可以指出我引用这个.async()函数吗?

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

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()电话的内部工作。我不知道是否有一个库提供该功能,但你可以看到Backbone.LayoutManager https://github.com/tbranyen/backbone.layoutmanager/blob/master/backbone.layoutmanager.js 使用了这个技巧(搜索this.async)。

此外,Tim Branyen(骨干布局管理器的作者)在他的视频教程(http://vimeo.com/32765088 14:00 - 15:00左右)中简要介绍了它。在视频中,蒂姆说本·阿尔曼想出了这个把戏。也看看这个 https://github.com/cowboy/javascript-sync-async-foreach

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

干杯

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

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

阅读更多关于它的信息:https://gruntjs.com/inside-tasks#inside-all-tasks

这是一种解决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);