如何在 Javascript 中延迟执行？答案

【问题标题】：How do I delay an execution in Javascript?如何在 Javascript 中延迟执行？
【发布时间】：2017-02-26 23:52:10
【问题描述】：

我发誓在我在这里问之前几个小时我一直在寻找解决这个问题的方法，我找到了一些代码，但仍然没有适合我需要的东西......问题是我有一些盒子和 1 个按钮滚动随机样式...当我单击按钮时，以下代码开始；

    function roll(){
  for (i = 0; i < 4; i++) {
      setInterval(function(){ 
        res = Math.floor(Math.random() * 10) + 1;
        /*document.getElementById("slot-" + res).style.border = "5px solid red";
        document.getElementById("slot-" + res).style.color = "red";*/
        document.getElementById("slot-" + res).className = "col-sm-2 slot-active"; 
      }, 500);
        document.getElementById("slot-" + res).className = "col-sm-2 slot"; 
   } 
};

它在 1 到 10 之间随机选择并将样式类更改为该框...所以...在循环后的行中，我假装将原始阶梯放回原处，因此它看起来像是随机选择... .但它不执行，如果我把它放在for循环中它会立即执行并且似乎什么都没有发生......我是Javascript菜鸟，我正在尝试学习和练习！......提前感谢您的帮助！ ...

【问题讨论】：

您的实际需求不清楚
最后一行在setInterval里面的代码之前执行，里面的代码会无限期地每1/2秒重复执行一次。学习一些教程

标签： javascript jquery html

【解决方案1】：

您可以创建一个 setInterval 来随机设置所选类，并设置一个 setTimeout 来结束所述间隔的执行，如下所示：https://jsfiddle.net/canastro/xxdbjm4n/1/

const refreshIntervalId = setInterval(() => {
    $('.selected').removeClass('selected');
  const res = Math.floor(Math.random() * 10) + 1;
  $(`.slot-${res}`).addClass('selected');
}, 500)

setTimeout(() => {
    clearInterval(refreshIntervalId);
}, 3000);

【讨论】：

【解决方案2】：

您可以使用 setTimeout(function(){dosomething}, timeout)，顺便说一句。添加console.log('something')查看函数是否真正执行。

顺便说一句。如果您正在使用间隔，请记住，如果您不想让它永远运行，您可能需要取消它，您也可以使用循环函数（一个调用自身的函数），并在某些条件下确定何时或现在进行处理。

顺便说一句。每次创建间隔时，将其分配给某个变量或其他东西，以便您可以取消它！

【讨论】：

谢谢你，我添加了另一个功能，你告诉我的超时选项......它工作得很好！现在我只需要找到一种方法来阻止那个大声笑！
嗨，只需将它分配给 setTimeout 到变量所以 var something = setTimeout()，稍后你可以这样做： var myVar;函数 myFunction() { myVar = setTimeout(function(){ alert("Hello"); }, 3000); } 功能 myStopFunction() { clearTimeout(myVar); }
所以基本上 clearTimeout(variableThatSetTimeoutWasAssignedTo)

【解决方案3】：

您的答案应该是这样的。您需要查看 javascript 变量范围。

 function roll(){
 
  for (i = 0; i < 4; i++) {
      var res = Math.floor(Math.random() * 10) + 1;
      function active(res){
        setTimeout(function(){ 
        document.getElementById("slot-" + res).className = "col-sm-2 slot-active"; 
      }, 500);
        document.getElementById("slot-" + res).className = "col-sm-2 slot"; 
      }
      active(res);
   } 
};

div{
 width:50px;
 height:50px;
 background:#ccc;
 float:left;
 margin:5px;
}
.slot{
 background:#0f0;
}
.slot-active{
 background:#f00;
}

<button onclick="roll()" style="display:block;">roll</button>
<div id="slot-1"></div>
<div id="slot-2"></div>
<div id="slot-3"></div>
<div id="slot-4"></div>
<div id="slot-5"></div>
<div id="slot-6"></div>
<div id="slot-7"></div>
<div id="slot-8"></div>
<div id="slot-9"></div>
<div id="slot-10"></div>

【讨论】：