什么是sleep()的JavaScript版本？

Question

有没有sleep比使用以下pausecomp函数更好的方法来设计JavaScript (从这里开始)？

function pausecomp(millis)
{
    var date = new Date();
    var curDate = null;
    do { curDate = new Date(); }
    while(curDate-date < millis);
}

这不是JavaScript中Sleep的重复- 动作之间的延迟 ; 我希望在函数中间实现真正的睡眠,而不是在执行代码之前的延迟.

Answer 1

2017年更新

自从2009年提出这个问题以来,JavaScript已经有了很大的发展.所有其他答案现在已经过时或过于复杂.这是目前的最佳做法:

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
  console.log('Taking a break...');
  await sleep(2000);
  console.log('Two seconds later, showing sleep in a loop...');

  // Sleep in loop
  for (let i = 0; i < 5; i++) {
    if (i === 3)
      await sleep(2000);
    console.log(i);
  }
}

demo();

就是这个.await sleep(<duration>).

您可以在Runkit上试用此代码.注意,

1. await只能在前缀为async关键字的函数中执行.Runkit在执行之前将代码包装在异步函数中.
2. await仅暂停当前async功能

两个新的JavaScript功能帮助编写了这个实际的"睡眠"功能:

• Promise,ES2015(又名ES6)的原生特色.我们还在睡眠功能的定义中使用箭头函数.
• 在即将到来的 async/await功能可以让代码明确等待一个承诺来解决.

兼容性

• 在节点v0.12 +中支持promises,并且在浏览器中广泛支持,IE除外
• async/ await登陆V8,自Chrome 55以来默认启用
  • 它于2016年10月登陆Node 7
  • 并于2016年11月登陆Firefox Nightly

如果由于某种原因,你正在使用节点超过7,或者针对旧的浏览器,async/ await仍然可以通过使用巴别塔(一种工具,将transpile的JavaScript +新功能集成到普通的旧的JavaScript),与transform-async-to-generator插件.跑

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
  console.log('Taking a break...');
  await sleep(2000);
  console.log('Two seconds later, showing sleep in a loop...');

  // Sleep in loop
  for (let i = 0; i < 5; i++) {
    if (i === 3)
      await sleep(2000);
    console.log(i);
  }
}

demo();

创建await sleep(<duration>):

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
  console.log('Taking a break...');
  await sleep(2000);
  console.log('Two seconds later, showing sleep in a loop...');

  // Sleep in loop
  for (let i = 0; i < 5; i++) {
    if (i === 3)
      await sleep(2000);
    console.log(i);
  }
}

demo();

然后运行你的代码

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
  console.log('Taking a break...');
  await sleep(2000);
  console.log('Two seconds later, showing sleep in a loop...');

  // Sleep in loop
  for (let i = 0; i < 5; i++) {
    if (i === 3)
      await sleep(2000);
    console.log(i);
  }
}

demo();

但是,如果您使用的是Node 7或更高版本,或者您的目标是现代浏览器,则不需要这样做.

Answer 2

(参见2016年更新的答案)

我认为想要执行一个动作,等待,然后执行另一个动作是完全合理的.如果您习惯于使用多线程语言编写,那么在线程唤醒之前,您可能会在一段时间内执行执行操作.

这里的问题是JavaScript是一个基于事件的单线程模型.虽然在特定情况下,让整个引擎等待几秒钟可能会很好,但总的来说这是不好的做法.假设我想在编写自己的函数时使用你的函数？当我打电话给你的方法时,我的方法都会冻结.如果JavaScript可以某种方式保留你的函数的执行上下文,将它存储在某个地方,然后将其恢复并稍后继续,然后就可以发生睡眠,但这基本上就是线程化.

因此,您几乎坚持其他人的建议 - 您需要将代码分解为多个功能.

那么你的问题是一个错误的选择.没有办法以你想要的方式睡觉,你也不应该寻求你建议的解决方案.

Answer 3

在JavaScript中,我重写了每个函数,以便它可以尽快结束.您希望浏览器重新进入控制状态,以便进行DOM更改.

每次我想在我的功能中间睡一觉,我都会重构使用setTimeout().

我要编辑这个答案,因为我觉得这很有用:

在任何语言中臭名昭着的睡眠或延迟功能都备受争议.有些人会说应该总是有一个信号或回调来激发给定的功能,其他人会争辩说有时候任意延迟的时刻都是有用的.我说每个人都有自己和一个规则在这个行业中永远不会有任何规定.

编写一个sleep函数很简单,使用JavaScript Promises更加实用:

// sleep time expects milliseconds
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

// Usage!
sleep(500).then(() => {
    // Do something after the sleep!
});

Answer 4

仅适用于debug/dev,如果它对某人有用,我会发布

有趣的东西,在Firebug(可能还有其他js控制台)中,只有在指定的睡眠时间后才会进入,

function sleepFor( sleepDuration ){
    var now = new Date().getTime();
    while(new Date().getTime() < now + sleepDuration){ /* do nothing */ } 
}

使用示例:

function sleepThenAct(){ sleepFor(2000); console.log("hello js sleep !"); }

Answer 5

我同意其他海报,忙碌的睡眠只是一个坏主意.

但是,setTimeout不会阻止执行,它会在超时设置后立即执行函数的下一行,而不是在超时到期后执行,这样就无法完成睡眠完成的相同任务.

这样做的方法是将您的功能分解为部件之前和之后.

function doStuff()
{
  //do some things
  setTimeout(continueExecution, 10000) //wait ten seconds before continuing
}

function continueExecution()
{
   //finish doing things after the pause
}

确保您的函数名称仍然准确地描述每个部分正在做什么(IE GatherInputThenWait和CheckInput,而不是funcPart1和funcPart2)

编辑

这种方法的目的是在超时之后不执行您决定的代码行,同时仍然将控制权返回给客户端PC以执行其排队的任何其他内容.

进一步编辑

正如评论中指出的那样,这绝对不会循环.你可以做一些花哨的(丑陋的)黑客攻击让它在一个循环中工作,但总的来说这只会造成灾难性的意大利面条代码.

Answer 6

为了爱$ DEITY,请不要做一个忙碌的等待睡眠功能. setTimeout并setInterval做你需要的一切.

Answer 7

我知道这是一个古老的问题,但如果(像我一样)你在使用Jino和Rhino,你可以使用...

try
{
  java.lang.Thread.sleep(timeInMilliseconds);
}
catch (e)
{
  /*
   * This will happen if the sleep is woken up - you might want to check
   * if enough time has passed and sleep again if not - depending on how
   * important the sleep time is to you.
   */
}

Answer 8

如果您正在使用jQuery,有人实际上创建了一个"延迟"插件,它只不过是setTimeout的包装器:

// Delay Plugin for jQuery
// - http://www.evanbot.com
// - © 2008 Evan Byrne

jQuery.fn.delay = function(time,func){
    this.each(function(){
        setTimeout(func,time);
    });

    return this;
};

然后,您可以按预期在一行函数调用中使用它:

$('#warning')
.addClass('highlight')
.delay(1000)
.removeClass('highlight');

Answer 9

从 Node.js 16+ 开始，新的 Promisified 版本setTimeout()可用：

import { setTimeout as sleep } from 'timers/promises'

console.log('Hello!')

await sleep(2000) //  [2 seconds]

console.log('Goodbye, after 2 seconds!')

您还可以传递一个value来实现承诺，也可以传递一个options（作为第二个和第三个参数）。请参阅https://nodejs.org/api/timers.html#timerspromisessettimeoutdelay-value-options。

^{感谢@kigiri的评论。}

Answer 10

我也搜索过睡眠解决方案(不适用于生产代码,仅适用于开发/测试)并找到了这篇文章:

http://narayanraman.blogspot.com/2005/12/javascript-sleep-or-wait.html

...这里是客户端解决方案的另一个链接:http://www.devcheater.com/

此外,当您打电话时alert(),您的代码也将暂停,同时显示警报 - 需要找到一种不显示警报但获得相同效果的方法.:)

Answer 11

这是使用同步XMLHttpRequest的简单解决方案:

function sleep(n){
  var request = new XMLHttpRequest();
  request.open('GET', '/sleep.php?n=' + n, false);  // `false` makes the request synchronous
  request.send(null);
}

sleep.php的内容:

<?php sleep($_GET['n']);

现在叫它:sleep(5);

Answer 12

内联：

(async () => await new Promise(resolve => setTimeout(resolve, 500)))();

这里的 500 是 VM 在移动到下一行代码之前等待的时间（以毫秒为单位）。

有点tldr；

基本上，当您创建承诺时，它会在创建时返回一个可观察的对象，并在回调中提供解析的引用，以便在数据/响应可用时移交数据/响应。在这里，resolve 在 500 毫秒后被调用setTimeOut，直到解析没有被执行，外部作用域才会等待进一步的处理，因此，创建了一个假阻塞。它与非阻塞（或在其他语言中称为非线程保留睡眠）完全不同，因为线程和很可能的 UI 以及网页/节点应用程序的任何其他正在进行的任务将被阻塞，并且主线程将被阻塞。专门用于等待承诺决议。

Answer 13

干得好.正如代码所说,不要成为一个糟糕的开发者并在网站上使用它.这是一个开发实用功能.

// Basic sleep function based on ms.
// DO NOT USE ON PUBLIC FACING WEBSITES.
function sleep(ms) {
    var unixtime_ms = new Date().getTime();
    while(new Date().getTime() < unixtime_ms + ms) {}
}

Answer 14

我个人喜欢简单:

function sleep(seconds){
    var waitUntil = new Date().getTime() + seconds*1000;
    while(new Date().getTime() < waitUntil) true;
}

然后:

sleep(2); // Sleeps for 2 seconds

我一直在使用它来创建伪造的加载时间,同时在P5js中创建脚本

Answer 15

这setTimeout是 JavaScript 异步方法的一部分（开始执行的方法，其结果将在将来的某个时间排队到称为回调队列的组件中，稍后执行）

您可能想要做的是将setTimeout函数包装在 Promise 中。

承诺示例：

const sleep = time => new Promise(res => setTimeout(res, time, "done sleeping"));

// using native promises
sleep(2000).then(msg => console.log(msg));

异步/等待示例：

const sleep = time => new Promise(res => setTimeout(res, time, "done sleeping"));

// using async/await in top level
(async function(){
  const msg = await sleep(2000);
  console.log(msg);
})();

阅读有关setTimeout 的更多信息

Answer 16

第一:

定义一个你想要执行的函数,如下所示:

function alertWorld(){
  alert("Hello World");
}

然后使用setTimeout方法安排执行:

setTimeout(alertWorld,1000)

注意两件事

• 第二个参数是以毫秒为单位的时间
• 作为第一个参数,你必须只传递函数的名称(引用),而不是括号

Answer 17

使用Promise 的单行代码

const wait = t => new Promise(s => setTimeout(s, t, t));

带有中止信号的打字稿

const wait = (x: number, signal?: AbortSignal): Promise<number> => {
  return new Promise((s, f) => {
    const id = setTimeout(s, x, x);
    signal?.addEventListener('abort', () => {
      clearTimeout(id);
      f('AbortError');
    });
  });
};

演示

const wait = (x: number, signal?: AbortSignal): Promise<number> => {
  return new Promise((s, f) => {
    const id = setTimeout(s, x, x);
    signal?.addEventListener('abort', () => {
      clearTimeout(id);
      f('AbortError');
    });
  });
};

Answer 18

让事情看起来像大多数人想要的更好的解决方案是使用匿名函数:

alert('start');
var a = 'foo';
//lots of code
setTimeout(function(){  //Beginning of code that should run AFTER the timeout
    alert(a);
    //lots more code
},5000);  // put the timeout here

这可能是你最接近你想要的东西的东西.

请注意,如果您需要多次睡眠,这可能会匆忙变得难看,您可能实际上需要重新考虑您的设计.

Answer 19

  await new Promise(resolve => setTimeout(resolve, 2000));

确保您的调用函数是异步的

经过验证且工作正常

Answer 20

没有任何依赖的最短解决方案：

await new Promise(resolve => setTimeout(resolve, 5000));

Answer 21

此答案适用于Node 18及更高版本！

而不是做：

await new Promise(resolve => setTimeout(resolve, 2000));

我们现在可以这样做：

const { setTimeout } = require('timers/promises');
await setTimeout(3000); // sleep 3 seconds

Answer 22

2022 年更新

只需使用此代码片段即可。

await new Promise(resolve => setTimeout(resolve, 2000));

Answer 23

对于浏览器,我同意setTimeout和setInterval是要走的路.

但对于服务器端代码,它可能需要阻塞功能(例如,因此您可以有效地进行线程同步).

如果你正在使用node.js和meteor,你可能会遇到在光纤中使用setTimeout的限制.这是服务器端睡眠的代码.

var Fiber = require('fibers');

function sleep(ms) {
    var fiber = Fiber.current;
    setTimeout(function() {
        fiber.run();
    }, ms);
    Fiber.yield();
}

Fiber(function() {
    console.log('wait... ' + new Date);
    sleep(1000);
    console.log('ok... ' + new Date);
}).run();
console.log('back in main');

请参阅:https://github.com/laverdet/node-fibers#sleep

Answer 24

我将setTimeOut封装在Promise中,以便与其他异步任务进行代码一致性:Fiddle中的 Demo

function sleep(ms)
{
    return(new Promise(function(resolve, reject) {        
        setTimeout(function() { resolve(); }, ms);        
    }));    
}

像这样使用:

sleep(2000).then(function() { 
   // Do something
});

如果您曾经使用过Promises,那么很容易记住语法.

Answer 25

这里的大多数答案都是误导的,或者至少是过时的.没有理由javascript必须是单线程的,事实上它不是.今天所有主流浏览器都支持工作者,在此之前,其他javascript运行时如Rhino和Node.js支持多线程.

'Javascript is single threaded'不是一个有效的答案.例如,在worker中运行sleep函数不会阻止在ui线程中运行的任何代码.

在支持生成器和yield的较新运行时,可以在单线程环境中为sleep函数带来类似的功能:

// This is based on the latest ES6 drafts.
// js 1.7+ (SpiderMonkey/Firefox 2+) syntax is slightly different

// run code you want to sleep here (ommit star if using js 1.7)
function* main(){
    for (var i = 0; i < 10; i++) {
        // to sleep for 10 milliseconds 10 times in a row
        yield 10;
    }

    yield 5;
    console.log('I just slept 5 milliseconds!');
}

// resume the given generator after ms milliseconds
function resume(ms, generator){
    setTimeout(function(){
        // ommit .value if using js 1.7
        var nextSleep = generator.next().value;
        resume(nextSleep, generator);
    }, ms);
}

// initialize generator and get first sleep for recursive function
var
    generator = main(),
    firstSleep = generator.next().value;

// initialize recursive resume function
resume(firstSleep, generator);

这种模仿睡眠不同于真正的睡眠功能,因为它不会阻塞线程.它只是javascript的当前setTimeout函数之上的糖.此功能类型已在Task.js中实现,今天应该可以在Firefox中使用.

Answer 26

我向以前的 python 开发人员推荐这种方法

const sleep = (time) => {
   return new Promise((resolve) => setTimeout(resolve, Math.ceil(time * 1000)));
};

用法：

await sleep(10) // for 10 seconds

Answer 27

我已经在javascript sleep/wait上搜索/搜索了不少网页...如果你想让javascript"运行,延迟,运行",那么没有答案...大多数人得到的是"RUN,RUN(无用)东西),运行"或"运行,运行+延迟运行"....

所以我吃了一些汉堡,并且开始思考::这里有一个解决方案可行......但是你必须砍掉你的运行代码... :::是的,我知道,这只是一个更容易阅读的重构...还是......

// ......................................... // example1:

<html>
<body>
<div id="id1">DISPLAY</div>

<script>
//javascript sleep by "therealdealsince1982"; copyrighted 2009
//setInterval
var i = 0;

function run() {
    //pieces of codes to run
    if (i==0){document.getElementById("id1").innerHTML= "<p>code segment "+ i +" is ran</p>"; }
    if (i==1){document.getElementById("id1").innerHTML= "<p>code segment "+ i +" is ran</p>"; }
    if (i==2){document.getElementById("id1").innerHTML= "<p>code segment "+ i +" is ran</p>"; }
    if (i >2){document.getElementById("id1").innerHTML= "<p>code segment "+ i +" is ran</p>"; }
    if (i==5){document.getElementById("id1").innerHTML= "<p>all code segment finished running</p>"; clearInterval(t); } //end interval, stops run
    i++; //segment of code finished running, next...
}

run();
t=setInterval("run()",1000);

</script>
</body>
</html>

// .................................... // example2:

<html>
<body>
<div id="id1">DISPLAY</div>

<script>
//javascript sleep by "therealdealsince1982"; copyrighted 2009
//setTimeout
var i = 0;

function run() {
    //pieces of codes to run, can use switch statement
    if (i==0){document.getElementById("id1").innerHTML= "<p>code segment "+ i +" ran</p>"; sleep(1000);}
    if (i==1){document.getElementById("id1").innerHTML= "<p>code segment "+ i +" ran</p>"; sleep(2000);}
    if (i==2){document.getElementById("id1").innerHTML= "<p>code segment "+ i +" ran</p>"; sleep(3000);}
    if (i==3){document.getElementById("id1").innerHTML= "<p>code segment "+ i +" ran</p>";} //stops automatically
    i++;
}

function sleep(dur) {t=setTimeout("run()",dur);} //starts flow control again after dur

run(); //starts
</script>
</body>
</html>

// ................. example3:

<html>
<body>
<div id="id1">DISPLAY</div>

<script>
//javascript sleep by "therealdealsince1982"; copyrighted 2009
//setTimeout
var i = 0;

function flow() {
    run(i);
    i++; //code segment finished running, increment i; can put elsewhere
    sleep(1000);
    if (i==5) {clearTimeout(t);} //stops flow, must be after sleep()
}

function run(segment) {
    //pieces of codes to run, can use switch statement
    if (segment==0){document.getElementById("id1").innerHTML= "<p>code segment "+ segment +" is ran</p>"; }
    if (segment==1){document.getElementById("id1").innerHTML= "<p>code segment "+ segment +" is ran</p>"; }
    if (segment==2){document.getElementById("id1").innerHTML= "<p>code segment "+ segment +" is ran</p>"; }
    if (segment >2){document.getElementById("id1").innerHTML= "<p>code segment "+ segment +" is ran</p>"; }
}

function sleep(dur) {t=setTimeout("flow()",dur);} //starts flow control again after dur

flow(); //starts flow
</script>
</body>
</html>

// .............. example4:

<html>
<body>
<div id="id1">DISPLAY</div>

<script>
//javascript sleep by "therealdealsince1982"; copyrighted 2009
//setTimeout, switch
var i = 0;

function flow() {
    switch(i)
    {
        case 0:
            run(i);
            sleep(1000);
            break;
        case 1:
            run(i);
            sleep(2000);
            break;
        case 5:
            run(i);
            clearTimeout(t); //stops flow
            break;
        default:
            run(i);
            sleep(3000);
            break;
    }
}

function run(segment) {
    //pieces of codes to run, can use switch statement
    if (segment==0){document.getElementById("id1").innerHTML= "<p>code segment "+ segment +" is ran</p>"; }
    if (segment==1){document.getElementById("id1").innerHTML= "<p>code segment "+ segment +" is ran</p>"; }
    if (segment==2){document.getElementById("id1").innerHTML= "<p>code segment "+ segment +" is ran</p>"; }
    if (segment >2){document.getElementById("id1").innerHTML= "<p>code segment "+ segment +" is ran</p>"; }
    i++; //current segment of code finished running, next...
}

function sleep(dur) {t=setTimeout("flow()",dur);} //starts flow control again after dur

flow(); //starts flow control for first time...
</script>
</body>
</html>

Answer 28

在 sleep 方法中，您可以返回任何 then-able 对象。而且不一定是新的承诺。

例子：

const sleep = (t) =>  ({ then: (r) => setTimeout(r, t) })

const someMethod = async () => {

    console.log("hi");
    await sleep(5000)
    console.log("bye");
}

someMethod()

Answer 29

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

Answer 30

使用Atomics.wait更新2019

应该在Node 9.3或更高版本中工作。

我在Node.js中需要一个非常准确的计时器，因此非常有用。但是，似乎浏览器中的支持非常有限。

let ms = 10000;
Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, ms);

运行了10秒的计时器基准测试。

使用setTimeout，我得到的错误最多为7000微秒。（7毫秒）

使用Atomics，我的错误似乎保持在600微秒以下。（0.6毫秒）

Answer 31

你不能像在JavaScript中那样睡觉,或者你不应该这样.运行sleep或while循环将导致用户的浏览器挂起,直到循环完成.

使用您引用的链接中指定的计时器.

Answer 32

您可能需要sleep()函数而不是使用setTimeout()的一种情况是,如果您有一个响应用户点击的函数,最终将打开一个新的弹出窗口,并且您已启动了一些需要短时间的处理在弹出窗口显示之前完成.将打开的窗口移动到闭包意味着它通常被浏览器阻止.

Answer 33

如果你必须处理同步执行,我可以理解睡眠功能的目的.setInterval和setTimeout函数创建一个并行执行线程,该线程将执行序列返回给主程序,如果你必须等待给定的结果,这将无效.当然,可以使用事件和处理程序,但在某些情况下不是预期的.

Answer 34

添加我的两位.我需要忙着等待测试.我不想分割代码,因为那将是很多工作,所以这对我来说很简单.

for (var i=0;i<1000000;i++){                    
     //waiting
  }

我没有看到这样做的任何缺点,它为我做了诀窍.

Answer 35

它可以使用Java的sleep方法完成.我已经在FF和IE中测试了它,它不会锁定计算机,咀嚼资源或导致无休止的服务器命中.对我来说似乎是一个干净的解决方案.

首先,您必须在页面上加载Java并使其方法可用.为此,我这样做了:

<html>
<head>

<script type="text/javascript">

  function load() {
    var appletRef = document.getElementById("app");
    window.java = appletRef.Packages.java;
  } // endfunction

</script>

<body onLoad="load()">

<embed id="app" code="java.applet.Applet" type="application/x-java-applet" MAYSCRIPT="true" width="0" height="0" />

然后,当你想在JS中进行无痛停顿时,你所要做的就是:

java.lang.Thread.sleep(xxx)

其中xxx是以毫秒为单位的时间.在我的情况下(通过证明),这是一个非常小的公司的后端订单履行的一部分,我需要打印一个必须从服务器加载的发票.我是通过将发票(作为网页)加载到iFrame然后打印iFrame来完成的.当然,我必须等到页面完全加载才能打印,所以JS必须暂停.我通过让发票页面(在iFrame中)使用onLoad事件更改父页面上的隐藏表单字段来实现此目的.打印发票的父页面上的代码看起来像这样(为了清晰起见,不相关的部分切割):

var isReady = eval('document.batchForm.ready');
isReady.value=0;

frames['rpc_frame'].location.href=url;

while (isReady.value==0) {
  java.lang.Thread.sleep(250);
} // endwhile

window.frames['rpc_frame'].focus();
window.frames['rpc_frame'].print();

因此,用户按下按钮,脚本加载发票页面,然后等待,每四分之一秒检查发票页面是否完成加载,然后弹出打印对话框,供用户将其发送到打印机.QED.

Answer 36

很多答案都没有(直接)回答这个问题,而且这个问题也没有......

这是我的两分钱(或函数):

如果你想要比setTimeout和更少的笨重的函数setInterval,你可以将它们包装在只是颠倒参数顺序的函数中并给它们好名字:

function after(ms, fn){ setTimeout(fn, ms); }
function every(ms, fn){ setInterval(fn, ms); }

CoffeeScript版本:

after = (ms, fn)-> setTimeout fn, ms
every = (ms, fn)-> setInterval fn, ms

然后,您可以很好地使用它们与匿名函数:

after(1000, function(){
    console.log("it's been a second");
    after(1000, function(){
        console.log("it's been another second");
    });
});

现在它很容易读作"经过N毫秒,......"(或"每N毫秒......")

Answer 37

你可以做这样的事情。一个所有函数都可以继承的sleep方法：

Function.prototype.sleep = function(delay, ...args) {
    setTimeout(() => this(...args), delay)
}

console.log.sleep(2000, 'Hello, World!!')

Answer 38

对于想要通过循环执行一组调用的特定情况,您可以使用类似下面的代码和原型.如果没有原型,可以使用setTimeout替换延迟函数.

function itemHandler(item)
{
    alert(item);
}

var itemSet = ['a','b','c'];

// Each call to itemHandler will execute
// 1 second apart
for(var i=0; i<itemSet.length; i++)
{
    var secondsUntilExecution = i;
    itemHandler.delay(secondsUntilExecution, item)
}

Answer 39

如果你在node.js上,你可以看一下光纤 - 节点的本地C扩展,一种多线程模拟.

它允许您以sleep阻止光纤执行的方式执行实际操作,但它在主线程和其他光纤中无阻塞.

这是他们自己的自述新鲜的一个例子:

// sleep.js

var Fiber = require('fibers');

function sleep(ms) {
    var fiber = Fiber.current;
    setTimeout(function() {
        fiber.run();
    }, ms);
    Fiber.yield();
}

Fiber(function() {
    console.log('wait... ' + new Date);
    sleep(1000);
    console.log('ok... ' + new Date);
}).run();
console.log('back in main');

- 结果如下:

$ node sleep.js
wait... Fri Jan 21 2011 22:42:04 GMT+0900 (JST)
back in main
ok... Fri Jan 21 2011 22:42:05 GMT+0900 (JST)

Answer 40

2009年的一个老问题.现在在2015年,ECMAscript 2015又名ES6中定义的发电机可以实现新的解决方案.它在六月份获得批准,但之前在Firefox和Chrome中实现过.现在,睡眠功能可以非繁忙,非阻塞并嵌套在循环和子功能中,而不会冻结浏览器.只需要纯JavaScript,没有库或框架.

下面的程序显示了如何sleep()以及如何runSleepyTask()制作.该sleep()功能只是一个yield声明.这很简单,实际上yield直接编写语句而不是调用更容易sleep(),但之后就没有睡眠字:-) yield会向next()内部方法返回一个时间值wakeup()并等待.实际的"睡眠"是在wakeup()使用旧的时候完成的setTimeout().在回调时,该next()方法触发yield语句继续,并且yield的"魔力"是所有局部变量及其周围的整个调用堆栈仍然完好无损.

必须将使用sleep()或yield的函数定义为生成器.通过在关键字中添加asterix轻松完成function*.执行生成器有点棘手.当使用关键字调用时,new生成器返回具有该next()方法的对象,但不执行生成器的主体(关键字new是可选的,没有区别).该next()方法触发生成器主体的执行,直到遇到a yield.包装函数runSleepyTask()启动乒乓:next()等待a yield,yield等待a next().

调用生成器的另一种方法是使用关键字yield*,这里它的工作方式类似于一个简单的函数调用,但它还包括返回的能力next().

这个例子都证明了这一点drawTree().它在旋转的3D场景上绘制了一棵树叶.树木被绘制为树干,顶部有3个不同方向的树.然后通过drawTree()在短暂睡眠之后递归调用,将每个部分绘制为另一个但更小的树.一棵非常小的树被画成一片叶子.

每个叶子都有自己的生命,在一个单独的任务开始runSleepyTask().它诞生,成长,坐下,褪色,跌倒和死亡growLeaf().速度由控制sleep().这表明了如何轻松完成多任务处理.

function* sleep(milliseconds) {yield milliseconds};

function runSleepyTask(task) {
    (function wakeup() {
        var result = task.next();
        if (!result.done) setTimeout(wakeup, result.value);
    })()
}
//////////////// written by Ole Middelboe  /////////////////////////////

pen3D =setup3D();
var taskObject = new drawTree(pen3D.center, 5);
runSleepyTask(taskObject);

function* drawTree(root3D, size) {
    if (size < 2) runSleepyTask(new growLeaf(root3D))
    else {
        pen3D.drawTrunk(root3D, size);
        for (var p of [1, 3, 5]) {
            var part3D = new pen3D.Thing;
            root3D.add(part3D);
            part3D.move(size).turn(p).tilt(1-p/20);
            yield* sleep(50);
            yield* drawTree(part3D, (0.7+p/40)*size);
        }
    }
}

function* growLeaf(stem3D) {
    var leaf3D = pen3D.drawLeaf(stem3D);
    for (var s=0;s++<15;) {yield* sleep(100); leaf3D.scale.multiplyScalar(1.1)}
    yield* sleep( 1000 + 9000*Math.random() );
    for (var c=0;c++<30;) {yield* sleep(200); leaf3D.skin.color.setRGB(c/30, 1-c/40, 0)}
    for (var m=0;m++<90;) {yield* sleep( 50); leaf3D.turn(0.4).tilt(0.3).move(2)}
    leaf3D.visible = false;
}
///////////////////////////////////////////////////////////////////////

function setup3D() {
    var scene, camera, renderer, diretionalLight, pen3D;

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, 
        window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 15, 20);
    renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    
    directionalLight = new THREE.DirectionalLight(0xffffaa, 0.7);
    directionalLight.position.set(-1, 2, 1);
    scene.add(directionalLight);
    scene.add(new THREE.AmbientLight(0x9999ff));
      
    (function render() {
        requestAnimationFrame(render);
        // renderer.setSize( window.innerWidth, window.innerHeight );
        scene.rotateY(10/60/60);
        renderer.render(scene, camera);
    })();
    
    window.addEventListener(
        'resize',
        function(){
            renderer.setSize( window.innerWidth, window.innerHeight );
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
       }, 
       false
    );
    
    pen3D = {
        drawTrunk: function(root, size) {
            // root.skin = skin(0.5, 0.3, 0.2);
            root.add(new THREE.Mesh(new THREE.CylinderGeometry(size/12, size/10, size, 16), 
                root.skin).translateY(size/2));
            root.add(new THREE.Mesh(new THREE.SphereGeometry(size/12, 16), 
                root.skin).translateY(size));
            return root;
        },
        
        drawLeaf: function(stem) {
            stem.skin.color.setRGB(0, 1, 0);
            stem.add(new THREE.Mesh(new THREE.CylinderGeometry(0, 0.02, 0.6), 
                stem.skin) .rotateX(0.3).translateY(0.3));
            stem.add(new THREE.Mesh(new THREE.CircleGeometry(0.2), 
                stem.skin) .rotateX(0.3).translateY(0.4));
            return stem;
        },
        
        Thing: function() {
            THREE.Object3D.call(this);
            this.skin = new THREE.MeshLambertMaterial({
                color: new THREE.Color(0.5, 0.3, 0.2),
                vertexColors: THREE.FaceColors,
                side: THREE.DoubleSide
            })
        }
    };

    pen3D.Thing.prototype = Object.create(THREE.Object3D.prototype);
    pen3D.Thing.prototype.tilt = pen3D.Thing.prototype.rotateX;
    pen3D.Thing.prototype.turn = pen3D.Thing.prototype.rotateY;
    pen3D.Thing.prototype.move = pen3D.Thing.prototype.translateY;
    
    pen3D.center = new pen3D.Thing;
    scene.add(pen3D.center);
    
    return pen3D;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>

3D内容隐藏在setup3D()中,仅包含它以使其比console.log()更无聊.顺便说一下,天使用弧度来衡量.

经测试可在Firefox和Chrome中使用.未在Internet Explore和iOS(iPad)中实现.尝试自己运行它.

在我找到答案后,Gabriel Ratener在一年前提出了类似的答案:https://stackoverflow.com/a/24401317/5032384

Answer 41

从Node 7.6开始，您可以将promisifyutils模块中的功能与结合 使用setTimeout。

const sleep = require('util').promisify(setTimeout)

一般用法

async function main() {
    console.time("Slept for")
    await sleep(3000)
    console.timeEnd("Slept for")
}

main()

问题用法

async function asyncGenerator() {
    while (goOn) {
      var fileList = await listFiles(nextPageToken);
      await sleep(3000)
      var parents = await requestParents(fileList);
    }
  }