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>

单击按钮后集成SetTimeOut函数

3 个答案: