Javascript 变量不更新它的值

Question

我在我的控制台中设置了以下内容:

document.getElementById('messsages').textContent;

这给了我输出 “这是我通过 websocket 聊天发送的消息!”

然后我做了

var convo = document.getElementById('messsages').textContent;

并在控制台中输入 convo，它给了我和以前一样的输出。然后，我通过我的 websocket 聊天发送了另一条消息并输入了 convo，它给了我旧的输出，但是当我输入 document.getElementById('messsages').textContent; 时，它给了我新的输出。

这是为什么？有没有一种方法可以让我分配一个变量，该变量根据我的元素更新其值？

Answer 1

尝试使用 IIFE

var convo = function convo() {
                return (function(elem) { 
                    return elem.textContent 
                }(document.getElementById("messages"))
            };

另见 MutationObserver

setInterval(function() {
 var arr = "abcdefg".split("");
 var i = 1 + Math.floor(Math.random() * arr.length -1);
 document.getElementById("messages").textContent = arr[i];
}, 2000);

var convo = function convo() {
  return (function(elem) {
    return elem.textContent
  }(document.getElementById("messages")))
};

document.addEventListener("click", function() {
  console.log(convo())
});

click
<div id="messages"></div>