全局变量lists跨函数调用显示undefined的原因及解决方法

咱们先拆解你代码里的核心问题，一步步解决：

1. 语法错误导致Observer完全无法工作 #

你代码里的config变量根本没正确定义！看这段代码：

var parentOfMyList = document.body;
attributes: true, childList: true, subtree: true };

这里你直接写了一个对象字面量，但没把它赋值给config变量，正确写法应该是：

var parentOfMyList = document.body;
var config = { attributes: true, childList: true, subtree: true };

这个语法错误会让observer.observe(parentOfMyList, config)里的config变成未定义状态，MutationObserver根本启动不了，回调函数自然不会执行，lists也就永远不会被赋值——这是你调用playthis时提示input未定义的最核心原因。

2. 异步执行的时机问题 #

就算修复了语法错误，还要注意：MutationObserver的回调是异步触发的，只有当DOM发生符合条件的变化时才会执行。如果在回调执行之前就调用playthis，lists依然是未定义状态。

修复后的完整代码示例 #

// 全局变量声明
var lists;

document.addEventListener("DOMContentLoaded", function(event) {
  var parentOfMyList = document.body;
  // 正确定义config变量
  var config = { attributes: true, childList: true, subtree: true };
  
  var callback = function(mutationsList) {
    for (var mutation of mutationsList) {
      if (mutation.type == 'childList') {
        var elt = document.getElementById("contents");
        if (elt) {
          lists = elt.textContent;
          console.log("lists已完成赋值:", lists);
          observer.disconnect();
          // 可以在这里直接调用playthis，确保lists已经有值
          // playthis();
        }
      }
    }
  };
  
  var observer = new MutationObserver(callback);
  observer.observe(parentOfMyList, config);
});

function playthis() {
  // 调用前先检查lists是否已赋值，避免报错
  if (!lists) {
    console.error("lists还未被赋值，请等待DOM变化完成后再调用！");
    return;
  }
  const input = lists;
  const sounds = input.toLowerCase();
  console.log(sounds);
}

额外优化建议 #

尽量避免使用全局变量，可以用Promise封装异步赋值逻辑，更优雅地处理时机问题：

const listsPromise = new Promise((resolve) => {
  document.addEventListener("DOMContentLoaded", function(event) {
    var parentOfMyList = document.body;
    var config = { attributes: true, childList: true, subtree: true };
    
    var callback = function(mutationsList) {
      for (var mutation of mutationsList) {
        if (mutation.type == 'childList') {
          var elt = document.getElementById("contents");
          if (elt) {
            resolve(elt.textContent);
            observer.disconnect();
          }
        }
      }
    };
    
    var observer = new MutationObserver(callback);
    observer.observe(parentOfMyList, config);
  });
});

async function playthis() {
  try {
    // 自动等待lists赋值完成
    const input = await listsPromise;
    const sounds = input.toLowerCase();
    console.log(sounds);
  } catch (err) {
    console.error("获取lists失败:", err);
  }
}

内容的提问来源于stack exchange，提问作者Cain Nuke