单击按钮后集成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";
}
}
}

Answer 1

将您想要延迟的代码放在匿名函数中，如下所示：

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) {
      setTimeout(function() {
         document.getElementById(divsToCheck[i]).style.display = "block";
      }, 500);
    } else {
      setTimeout(function() {
        document.getElementById(divsToCheck[i]).style.display = "none";
      }, 500);
    }
  }
}

这里，500意味着延迟500毫秒。您可以将其更改为您需要的任何时间量（以毫秒为单位）。

Answer 2

你应该在你的循环中调用一个函数来处理setTimeout并隐藏/显示而不是在循环中调用timeout函数。 （因为我不再可用而无法工作）。见这里：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');

Answer 3

你的问题有点不清楚，因为你的函数的名字是showDiv1，但是你解释说你正试图隐藏一个元素，所以我试图回答这个问题并希望它会给你一些想法。

此代码显示几个div。如果你点击它们，它们会变成红色，几秒钟后（表示一个动画），它们就会被隐藏。

dummyAnim返回promise。在动画运行之后（此处以两秒延迟表示），它将被解析。我已经使用await在async函数中暂停代码执行，直到动画解决了。

// Grab the elements and add click handlers to them
const divs = document.querySelectorAll('div');
divs.forEach(div => div.addEventListener('click', hideElement, false));

function dummyAnim() {

  // return a promise which resolves (an animation)
  // after two seconds
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(), 2000);
  });
}

async function hideElement() {
  this.classList.add('red');
  await dummyAnim();
  this.classList.add('hidden');
}

div { color: black; display: block }
.hidden { display: none }
.red { color: red }

<div>close</div>
<div>holder</div>