Javascript 延迟答案

【问题标题】：Javascript DelayJavascript 延迟
【发布时间】：2014-01-26 04:59:15
【问题描述】：

我知道 Javascript 没有 delay(500) 方法，它会延迟执行 500 毫秒，所以我一直试图通过使用 setTimeout 和 setInterval 来解决这个问题。

for(var i =0; i< 10; i++){
    /* Animation Code */
    var doNothing = function(){var m =5;}
    setTimeout(doNothing, 50); 
}

但是，这似乎不起作用。我本质上想要一些代码停止执行 n 毫秒，然后继续执行。

【问题讨论】：

“但是，这似乎不起作用”请扩展，它怎么不起作用
它有效...只是你的超时设置为 50 毫秒而不是 500 毫秒。
你在什么环境下运行这段代码？它是在浏览器中还是在其他地方？ setTimeout 实际上是 DOM 的一部分，而不是 JavaScript 本身。一些 JavaScript 环境提供了自己的 setTimeout 实现，但并非全部都提供。
@UselessCode 我将文档保存为 html 文件（我使用 textWrangler 作为应用程序）并通过在 chrome 中打开文件来运行它。
跳出框框思考。您问题的关键点是停止执行，然后继续执行。它假定您希望在停止/继续之间保留状态（在您的情况下，它是动画的状态，尽管i 变量也是其中的一部分）。这是其他答案目前没有解决的问题。这是如何完成的：stackoverflow.com/a/21360405/1768303.

标签： javascript browser delay settimeout setinterval

【解决方案1】：

实际上，您不能这样做。处理它并找到基于回调的方式。通常这意味着将延迟之后发生的所有事情放在回调本身中。

例如，你不能这样做让baz等待：

foo();
setTimeout(function() {
  bar();
}, 500);
baz();

所以你只能做你能做的：

foo();
setTimeout(function() {
  bar();
  baz();
}, 500);

【讨论】：

添加更多内容...以新的思维方式重构。不要简单地在 settimeout 回调中的回调中的回调中包含大量代码。
@Brad 你是对的。 Promises 是一个很好的起点。
那么为什么setTimeout在执行的时候没有等待指定的时间呢？我应该注意它的行为有什么特别之处吗？
setTimeout 有效。相信我。它确实在执行您传递的回调之前等待指定的持续时间。它不会阻止其他执行，这是设计使然。

【解决方案2】：

setInterval()方法等待指定的毫秒数，然后执行指定的函数，它会继续执行该函数，每隔给定的时间间隔执行一次。
语法

window.setInterval("javascript function",milliseconds);

window.setInterval()方法可以不用window前缀写。

setInterval() 的第一个参数应该是一个函数。
如何停止执行？
clearInterval() 方法用于停止进一步执行 setInterval() 方法中指定的函数。

语法

window.clearInterval(intervalVariable)

window.clearInterval() 方法可以不用窗口前缀来编写。

为了能够使用clearInterval()方法，你必须在创建区间方法时使用一个全局变量：

myVar=setInterval("javascript function",milliseconds);

然后您就可以通过调用clearInterval() 方法来停止执行。
good refrence

【讨论】：

在延迟和间隔之间有一个微妙但important difference。

【解决方案3】：

如果您来自语言/框架/API 背景，您可以使用 Sleep 之类的东西暂停执行，或者使用 DoEvents 之类的东西同步处理用户输入，那么它在 JavaScript 中不起作用。

您无法通过这样的方式阻止 JavaScript 事件循环，原因很充分：UI 响应性。在 JavaScript 中，一切都是异步的。您可以使用setTimeout 对定时器事件执行某些操作，但用户仍然可以在定时器事件之间访问 UI，甚至可以离开页面。

为了解决您的代码片段，您正在寻找的是所谓的异步状态机。它允许在停止/继续之间保留代码的状态（在您的情况下，它是动画的状态，尽管i 变量也是其中的一部分）：

(function()
{
    var i = 0;
    var nextStep = function()
    {
        if (i<10)
        {
            /* Animation Code */
            i++;
            setTimeout(nextStep, 500); 
        }
    }
    nextStep();
})();

当所有浏览器都支持新的yield关键字时，编码会容易得多：

http://pag.forbeslindesay.co.uk

附带说明，其他一些答案建议使用setInterval。 delay 和 interval 之间有一个微妙但重要的区别。延迟是两个步骤之间的时间。间隔是自上一步开始以来的时间。如果动画的每一步耗时 200 毫秒，而你使用 500 毫秒的间隔，那么两步之间的实际延迟将是 300 毫秒，而不是预期的 500 毫秒。

【讨论】：

【解决方案4】：

setInterval() - 以指定的时间间隔一遍又一遍地执行一个函数

要将函数作为字符串传递，请务必在函数名称后面加上括号。 window.setInterval("someFunction()", 5000);

传递函数指针时，不要包含括号。 window.setInterval(someFunction, 5000);

var timer_id=setInterval(doNothing,500);

如果你想停止执行使timer_id 变量成为全局变量

clearInterval(timer_id);

【讨论】：

在延迟和间隔之间有一个微妙但important difference。

【解决方案5】：

如果你使用 RxJS，代码会更清晰易读

这是一个例子：

Rx.Observable
  .interval(1000)
  .take(10)
  .subscribe((x) => console.log(`${x}: ${new Date().toLocaleTimeString()}`))

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.lite.min.js"&gt;&lt;/script&gt;

interval - 是动画调用之间的时间延迟。在我的例子中这是1000毫秒

take - 执行次数 subscribe - is function

将每 1000 毫秒调用 10 次（在您的情况下，它将是你的动画代码）

【讨论】：

【解决方案6】：

这里有一些可以帮助的东西。

function delay( s , callback )
{
    var fct_ref = "tmp_" + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 6).toUpperCase();       
    var tmp_fct = ( callback !== undefined ) ? callback.toString().match(/^[^{]+\{(.*?)\}$/)[1] : "";

    document.getElementsByTagName("body")[0].insertAdjacentHTML("beforeend","<div id='"+fct_ref+"' style='background-color:transparent;color:transparent;position:absolute;top:"+window.scrollY+"px;left:"+window.scrollX+"px;opacity:1;transition:all "+s+"s'>-</div>");

    var func = new Function("return function transition"+fct_ref+"(e){ e.target.removeEventListener('transitionend' , transition"+fct_ref+", false ); "+tmp_fct+" ; document.getElementById('"+fct_ref+"').parentNode.removeChild(document.getElementById('"+fct_ref+"')); };")();

    document.getElementById(""+fct_ref).addEventListener("transitionend", func , false );
    document.getElementById(""+fct_ref).offsetHeight;
    document.getElementById(""+fct_ref).style.opacity="0";
}

delay(1, function() { console.log("ANIMATION_1"); } );  
delay(3, function() { console.log("ANIMATION_3"); } );  
delay(5, function() { console.log("ANIMATION_5"); } );

【讨论】：