javascript - 单击按钮后集成 SetTimeOut 功能

Question

我创建了一段代码，通过使用 onClick 元素将状态从 display:block 更改为 display:none。我的目标是在动画效果发生时延迟状态变化几秒钟。

下面的这段代码是我目前用来更改元素状态的代码，但不确定如何合并延迟。

非常感谢任何意见或建议。

谢谢，蚂蚁

function showDiv1(elem) {

  var divsToCheck = ["close","Holder"]; // Add to here to check more divs
  for (var i = 0; i < divsToCheck.length; i++) {
  if (divsToCheck[i] == elem) {
  document.getElementById(divsToCheck[i]).style.display = "block";
} else {
  document.getElementById(divsToCheck[i]).style.display = "none";
}
}
}

标签： javascriptjqueryfunctionsettimeout

Answer 1

您应该在循环中调用一个函数来处理 setTimeout 和隐藏/显示，而不是在循环中调用超时函数。（不会工作，因为我不再可用）。见这里：https ://jsbin.com/refodobaca/1/edit?html,css,js,output

function showDiv1(elem) {
  var divsToCheck = ["close","Holder"]; // Add to here to check more divs
  for (var i = 0; i < divsToCheck.length; i++) {
    if (divsToCheck[i] == elem) {
      showHideDiv(divsToCheck[i], true);
    } else {
      showHideDiv(divsToCheck[i], false);
    }
  }
}

function showHideDiv(elem, bShow) {

  var timeoutSeconds = 3;
  setTimeout(function() {
    document.getElementById(elem).style.display = (bShow ? "block" : "none");
  }, timeoutSeconds * 1000);

}
showDiv1('Holder');