单击按钮后集成 SetTimeOut 功能答案

【问题标题】：integrating SetTimeOut function after button click单击按钮后集成 SetTimeOut 功能
【发布时间】：2019-04-24 19:07:03
【问题描述】：

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

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

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

谢谢，蚂蚁

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";
}
}
}

【问题讨论】：

你试过setTimeout()
语法是setTimeout(function () { /* code here */ }, 5 * 1000);（延迟5秒）

标签： javascript jquery function settimeout

【解决方案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 毫秒。您可以将其更改为您需要的任何时间（以毫秒为单位）。

【讨论】：

【解决方案2】：

您应该在循环中调用一个函数来处理 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');

【讨论】：

【解决方案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>

【讨论】：