javascript - 为什么在定义回调/监听器函数(异步消息传递、port.on)后不立即设置全局变量

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference (7 个回答)

已关闭 7 年前。

我对编写 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 消息 已收到。

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