为什么在定义 callback/listener 函数后不立即设置全局变量（异步消息，port.on）

Question

我对编写 Firefox 附加组件还很陌生。但是，我正在尽力而为。所以，我有这段代码，我 got from MDN:

var tabs = require("sdk/tabs");

tabs.on('activate', function(tab) {
  var worker = tab.attach({
    contentScript: 'self.port.emit("html", document.body.innerHTML);'
  });
  worker.port.on("html", function(message) {
   console.log(message)
  })
});

当我把它改成：

var contentHtml = '';

var tabs = require("sdk/tabs");

tabs.on('activate', function(tab) {
  var worker = tab.attach({
    contentScript: 'self.port.emit("html", document.body.innerHTML);'
  });
  worker.port.on("html", function(message) {
    contentHtml = message
  })
});

console.log(contentHtml);

它记录了一个空字符串。这是为什么？

将其放入变量 contentHtml 的正确方法是什么？

Answer 1

有关 JavaScript 中异步代码的更详细讨论，请参阅：

Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference
How do I return the response from an asynchronous call?

It logs an empty string. Why is that?

因为你设置了contentHtml = '';。在你console.log(contentHtml);的时候，它没有改变。

What is the proper way of putting this into the variable contentHtml?

你这样做的方式将它分配给 contentHtml 就好了。

您的问题在功能上不是如何为 contentHtml 赋值。这不是编写 Firefox 附加组件的特定问题。您的问题是了解异步编程的流程。

JavaScript 倾向于在使用它们的地方使用内联定义的未命名函数来编写。虽然这更紧凑，但我发现它往往会导致新程序员不太容易理解异步程序的执行流程。

我已经重写了您的代码，因此可以更清楚地了解以下情况：

var tabs = require("sdk/tabs");
var contentHtml = '';

function workerAttachedToTabWhenTabActivated() {
    //This is executed every time a tab is activated.
    //It is not executed until that time.
    self.port.emit("html", document.body.innerHTML);
}

function receiveHtmlMessageFromWorkerViaPortOn(message) {
    //This is executed only when we receive a message via port.on that is named "html".
    //It is not executed until such a message is received.

    //We set contentHtml to message here. While the contentHtml variable is defined in the
    //  containing code, setting it here does not, currently, do us any good because
    //  the rest of the program has already completed by the time this is executed.
    contentHtml = message;

    //Show that we actualy do set contentHtml.
    console.log("contentHtml after receiving html message:" + contentHtml);
}

tabs.on('activate', function(tab) {
  var worker = tab.attach({
    contentScript: 'workerAttachedToTabWhenTabActivated();'
  });
  worker.port.on("html", receiveHtmlMessageFromWorkerViaPortOn(message))
});

//When we execute the following statement contentHtml is still "".
//When we get here, we have set up our functions that are executed upon a tab becoming
//active, but that code has not yet been executed because no tab became active in the small
//amount of time between setting up those listeners and this executing.
console.log("contentHtml after setting up tab.attach:" + contentHtml);

正如您应该能够看到的，将全局变量 contentHtml 设置为 message 在这种情况下并没有多大用处，因为执行已经通过语句

console.log("contentHtml after setting up tab.attach:" + contentHtml);

到时候contentHtml设置为message。将全局变量 contentHtml 设置为 message 仅当存在其他可能稍后执行的异步代码需要知道最近的 html message 收到的是。

一般来说，所有依赖于 html message 内容的东西都应该放在接收到该消息时执行的函数中。

为什么在定义 callback/listener 函数后不立即设置全局变量（异步消息，port.on）

Why isn't a global variable set immediately after defining a callback/listener function (asynchronous messaging, port.on)

javascript

asynchronous

firefox-addon

firefox-addon-sdk