使用setTimeout时HTML脚本失效，变量无法跨函数传递求解

核心问题是变量作用域和setTimeout的调用方式导致s无法被myGreeting函数正确获取，下面是具体解决步骤：

1. 修改函数参数与调用方式 #

首先让myGreeting函数接收参数s，然后在setTimeout里通过匿名函数或箭头函数传递这个变量：

方法一：匿名函数包裹 #

// 定义接收参数的myGreeting
function myGreeting(s) {
  // 先检查元素是否存在，避免报错
  const demoEl = document.getElementById("demo");
  if (demoEl) {
    demoEl.innerHTML = `du har: ${s} ved klabbar`;
  }
}

// 假设你的变量s已被赋值
const s = "3 klabbar";

// 用匿名函数传递s到myGreeting
setTimeout(function() {
  myGreeting(s);
}, 1000); // 延迟1秒执行

方法二：箭头函数（更简洁，ES6+支持） #

setTimeout(() => myGreeting(s), 1000);

2. 关键检查点 #

• 确保调用setTimeout时，变量s已经被正确赋值（不要在setTimeout之后才给s赋值）
• 确认页面中确实存在id为demo的元素，否则getElementById会返回null，导致后续代码失效

完整示例代码 #

<!DOCTYPE html>
<html lang="no">
<head>
  <meta charset="UTF-8">
  <title>Eksempel</title>
</head>
<body>
  <p id="demo"></p>

  <script>
    function myGreeting(s) {
      const demoEl = document.getElementById("demo");
      if (demoEl) {
        demoEl.innerHTML = `du har: ${s} ved klabbar`;
      }
    }

    // 模拟变量s的赋值过程
    let s = "5 stykker";
    
    // 延迟执行问候函数
    setTimeout(() => myGreeting(s), 2000);
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者The First Space Cat