内联JavaScript实现的2秒加载超时功能失效，页面持续加载求助

你的代码里有几个关键问题导致加载界面一直不消失、功能无法正常触发，逐一修复如下：

1. 定时器参数顺序错误 #

setTimeout的正确语法是先传回调函数，再传延迟毫秒数，原代码写反了参数顺序，导致定时器完全没触发，加载界面一直挂着。

// 错误写法
setTimeout(2000, doThat)
// 修复后
setTimeout(() => doThat(something), 2000)

2. 参数传递丢失 #

loadingScreen接收的something参数没传给后续的doThat函数，导致doThat里的something是未定义状态，分支逻辑根本走不通。需要在定时器里把参数传递过去：

// 修改loadingScreen函数
function loadingScreen(something, event) {
  // ... 原有显示加载界面的代码
  setTimeout(() => doThat(something), 2000)
}
// 修改doThat函数接收参数
function doThat(something) {
  // ... 原有分支逻辑
}

3. 表单提交默认行为未正确阻止 #

内联点击事件里要手动传入event对象，不然event.preventDefault()会失效，导致表单提交后页面直接刷新，之前的逻辑白跑。修改submit按钮的onclick属性：

<input type="submit" value="Sign in (as guest)" onclick="loadingScreen('yes', event)" class="btn" />
<input type="submit" value="Sign in" onclick="loadingScreen('wowie', event)" class="btn" />

4. DOM元素值判断错误 #

checkForUser里直接拿DOM元素对象和字符串对比，永远不会相等，应该取输入框的value属性：

function checkForUser() {
  let yet = document.getElementById("ye")
  // 修复：取输入框的value值
  if (yet.value == "1234") {
    alert("Welcome.")
    CopyToLabelAdmin()
  } else {
    // ... 原有逻辑
  }
}

5. 拼写与命名冲突修复 #

• dontDelete1和dontDelete2里的dipslay是拼写错误，改成display
• 函数名CopyToLabe（少一个l）和CopyToLabel重复，会导致后者覆盖前者，统一命名为CopyToLabelAdmin避免冲突

修复后的完整代码 #

JavaScript部分

function checkForUser() {
  let yet = document.getElementById("ye")
  if (yet.value == "1234") {
    alert("Welcome.")
    CopyToLabelAdmin()
  } else {
    alert("Restricting Website to User1")
    event.preventDefault();
    document.getElementById("eheh").style.display = 'block';
    document.getElementById("lol").style.display = 'none';
    document.getElementById("neree").style.display = 'none';
  }
}

function CopyToLabel() {
  document.getElementById("nice").style.display = 'inherit'
  document.getElementById("nerer").style.display = 'none';
  event.preventDefault();
  var txtName = document.getElementById("txtName");
  var lblName = document.getElementById("lblName");

  lblName.innerHTML = txtName.value;
}

function CopyToLabelAdmin() {
  document.getElementById("adminpanel").style.display = 'inherit';
  document.getElementById("neree").style.display = 'none';
  document.getElementById("nice").style.display = 'inherit';
  event.preventDefault();
  var txtName = document.getElementById("txtName2");
  var lblName = document.getElementById("lblName");

  lblName.innerHTML = txtName.value;
}

function bingbong() {
  document.getElementById("nerer").style.display = 'none';
  document.getElementById("neree").style.display = 'inherit';
}

function warnDelete() {
  let pro = confirm("Are you sure you want to activate Delete Mode?")
  if (pro === true) {
    document.getElementById("delete3").style.display = 'block';
    document.getElementById("delete2").style.display = 'block';
  } else {
    alert("Wise choice.")
  }
}

function unDelete() {
  document.getElementById("delete3").style.display = 'none';
  document.getElementById("delete2").style.display = 'none';
}

function delete3() {
  document.getElementById("bro").style.display = 'none';
  document.getElementById("delete3").style.display = 'none'
}

function delete2() {
  document.getElementById("bre").style.display = 'none';
  document.getElementById("delete2").style.display = 'none'
}

function dontDelete1() {
  document.getElementById("bro").style.display = 'inline';
  document.getElementById("delete3").style.display = 'inline'
}

function dontDelete2() {
  document.getElementById("bre").style.display = 'inline';
  document.getElementById("delete2").style.display = 'inline'
}

function doThat(something) {
  document.getElementById("co").style.display = 'none'
  document.getElementById("coco").style.display = 'none'
  if (something == 'no') {
    bingbong()
  } else if (something == 'yes') {
    CopyToLabel()
  } else {
    checkForUser()
  }
}

function loadingScreen(something, event) {
  document.getElementById("coco").style.display = 'inline-block'
  document.getElementById("co").style.display = 'inline-block'
  document.getElementById("lol").style.display = 'none'
  document.getElementById("nerer").style.display = 'none'
  event.preventDefault()
  setTimeout(() => doThat(something), 2000)
}

HTML修改部分（仅调整onclick事件）

<input type="submit" value="Sign in (as guest)" onclick="loadingScreen('yes', event)" class="btn" />
<input type="button" value="Sign in (as admin)" onclick="loadingScreen('no', event)" class="btn">
<!-- 管理员表单提交按钮 -->
<input type="submit" value="Sign in" onclick="loadingScreen('wowie', event)" class="btn" />

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