我会将setTimeOut封装在Promise中，以实现与其他异步任务的代码一致性：Fiddle中的Demo

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

它的用法如下：

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

如果您习惯使用Promise，那么很容易记住语法。

2009年的一个老问题。2015年，ECMAScript 2015 AKA ES6中定义的生成器可以提供新的解决方案。它于2015年6月获得批准，但之前已在Firefox和Chrome中实现。现在，休眠功能可以在不冻结浏览器的情况下，在循环和子函数中进行非繁忙、非阻塞和嵌套。只需要纯JavaScript，不需要库或框架。

下面的程序显示了sleep（）和runSleepyTask（）是如何实现的。sleep（）函数只是一个yield语句。它非常简单，实际上直接编写yield语句比调用sleep（）更容易，但这样就不会有sleep单词了：-）yield返回一个时间值给wakeup（）内的next（）方法并等待。实际的“睡眠”是使用旧的setTimeout（）在wakeup（）中完成的。在回调时，next（）方法触发yield语句继续，yield的“魔力”在于所有局部变量及其周围的整个调用堆栈仍然完好无损。

使用sleep（）或yield的函数必须定义为生成器。这很容易通过在关键字函数*中添加星号来实现。执行生成器有点棘手。当使用关键字new调用时，生成器返回一个具有next（）方法的对象，但不执行生成器的主体（关键字new是可选的，没有任何区别）。next（）方法触发生成器主体的执行，直到遇到产量。包装函数runSleepyTask（）启动乒乓球：next（）等待yield，yield等待next（（）。

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

示例drawTree（）演示了这一切。它在旋转的3D场景上绘制了一棵带有树叶的树。一棵树被画成树干，顶部有三个不同方向的部分。在短暂的睡眠后，通过递归调用drawTree（），将每个部分绘制为另一个较小的树。一棵很小的树被画成一片叶子。

每个叶子在一个单独的任务中都有自己的生命，该任务以runSleepyTask（）开始。它在growtLeaf（）中出生、生长、静止、褪色、坠落和死亡。速度由sleep（）控制。这证明了多任务处理是多么容易。

函数*sleep（毫秒）｛yield毫秒｝；函数runSleepyTask（任务）{（函数唤醒（）{var result=task.next（）；if（！result.done）setTimeout（唤醒，result.value）；})()}////////////////作者：Ole Middelboe/////////////////////////////pen3D=setup3D（）；var taskObject=新绘图树（pen3D.center，5）；runSleepyTask（taskObject）；函数*drawTree（root3D，大小）{如果（size<2）运行SleepyTask（new-growLeaf（root3D））其他{pen3D.drawTrunk（root3D，大小）；for（变量p为[1，3，5]）{var part3D=新pen3D.Thing；root3D.add（part3D）；part3D.移动（尺寸）.转动（p）.倾斜（1-p/20）；产量*睡眠（50）；产量*drawTree（part3D，（0.7+p/40）*尺寸）；}}}函数*growtLeaf（stem3D）{var leaf3D=pen3D.drawLeaf（stem3D）；对于（var s=0；s++<15；）｛yield*sleep（100）；leaf3D.scale.multiplyScalar（1.1）｝yield*sleep（1000+9000*Math.random（））；对于（var c=0；c++<30；）｛yield*sleep（200）；leaf3D.sskin.color.setRGB（c/30，1-c/40，0）｝对于（var m=0；m++<90；）{yield*sleep（50）；leaf3D.turn（0.4）.tilt（0.3）.move（2）}leaf3D.visible=false；}///////////////////////////////////////////////////////////////////////函数setup3D（）{var场景，相机，渲染器，directionalLight，pen3D；scene=新的THREE.scene（）；相机=新的三个透视相机（75，window.innerWidth/window.innerHeight，0.1，1000）；相机位置设置（0，15，20）；renderer=new THREE.WebGLRenderer（｛alpha：真，抗锯齿：真｝）；renderer.setSize（window.innerWidth，window.innerHeight）；document.body.appendChild（render.domElement）；directionalLight=新的三个。directionalLight（0xffffaa，0.7）；directionalLight.position.set（-1，2，1）；scene.add（directionalLight）；scene.add（新的THREE.AmbientLight（0x9999ff））；（函数render（）{requestAnimationFrame（渲染）；//renderer.setSize（window.innerWidth，window.innerHeight）；场景旋转Y（10/60/60）；renderer.render（场景，摄影机）；})();window.addEventListener窗口('调整大小'，函数（）{renderer.setSize（window.innerWidth，window.innerHeight）；camera.aspx ect=window.innerWidth/window.innerHeight；camera.updateProjectionMatrix（）；},假的);pen3D={drawTrunk:函数（根，大小）{//root.skin=皮肤（0.5、0.3、0.2）；root.add（新的三个网格（新的三维圆柱体几何体（大小/12，大小/10，大小16），root.skin）.translateY（大小/2））；root.add（新的THREE.Mesh（新的THEREE.SphereGeometry（size/12,16），root.skin）.translateY（大小））；返回根；},drawLeaf:功能（茎）{stem.skin.color.setRGB（0，1，0）；stem.add（新的三个网格（新的三维圆柱体几何体（0，0.02，0.6），茎.皮肤）.旋转X（0.3）.平移Y（0.3））；stem.add（新的THREE.Mesh（新的THREE.CircleGeometry（0.2），茎.皮肤）.旋转X（0.3）.平移Y（0.4））；返回阀杆；},事物：函数（）{三.Object3D.调用（this）；this.skin=新的THREE.MeshLambertMaterial({颜色：新三。颜色（0.5，0.3，0.2），vertexColors:THREE.FaceColors（顶点颜色），边：三边，双面})}};pen3D.Thing.prototype=对象创建（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=新pen3D.Thing；scene.add（pen3D.center）；返回pen3D；}<script src=“https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js“></script>

3D内容隐藏在setup3D（）中，只是为了让它比console.log（）少一些无聊。顺便说一下，角度是用弧度来测量的。

经测试可在Firefox和Chrome中运行。未在Internet Explorer和iOS（iPad）中实施。试着自己运行它。

在我再次找到答案后，加布里埃尔·拉特纳一年前对sleep（）的JavaScript版本是什么做出了类似的回答？。

如果你喜欢建议，不要失去表现。setTimeout是您的预期睡眠。然而，如果您需要一种语法，其中代码被睡眠“中间分割”，我们可以这样做：

sleep = function(tm, fn){
   window.setTimeout(fn, tm);
}

然后，准备如下功能：

var fnBeforeSleep = function(){

  // All code before sleep

}

var fnAfterSleep = function(){

  // All code after sleep

}

然后：

fnBeforeSleep();
sleep(2000, fnAfterSleep);

// Yep! Syntactically, it is very close to:

fnBeforeSleep();
sleep(2000);
fnAfterSleep();

我浏览了一天的解决方案，但我仍在思考如何在使用回调时保持可链接性。

每个人都熟悉传统的编程风格，即以同步的方式逐行运行代码。SetTimeout使用回调，因此下一行不会等待它完成。这让我思考如何使其“同步”，从而实现“睡眠”功能。

从一个简单的协同程序开始：

function coroutine() {
    console.log('coroutine-1:start');
    sleepFor(3000); // Sleep for 3 seconds here
    console.log('coroutine-2:complete');
}

我想中间睡3秒钟，但我不想控制整个流程，所以协同程序必须由另一个线程执行。我考虑Unity Yield Instruction，并按以下方式修改协程：

function coroutine1() {
    this.a = 100;
    console.log('coroutine1-1:start');
    return sleepFor(3000).yield; // Sleep for 3 seconds here
    console.log('coroutine1-2:complete');
    this.a++;
}

var c1 = new coroutine1();

声明sleepFor原型：

sleepFor = function(ms) {
    var caller = arguments.callee.caller.toString();
    var funcArgs = /\(([\s\S]*?)\)/gi.exec(caller)[1];
    var args = arguments.callee.caller.arguments;
    var funcBody = caller.replace(/^[\s\S]*?sleepFor[\s\S]*?yield;|}[\s;]*$/g,'');
    var context = this;
    setTimeout(function() {
        new Function(funcArgs, funcBody).apply(context, args);
    }, ms);
    return this;
}

运行协同程序1（我在InternetExplorer11和Chrome49中进行了测试）后，您将看到它在两个控制台语句之间休眠3秒。它使代码与传统样式一样漂亮。

棘手的一点是在睡眠中。它将调用者函数体作为字符串读取，并将其分成两部分。拆下上部并通过下部创建另一个功能。等待指定的毫秒数后，它通过应用原始上下文和参数来调用创建的函数。对于原始流，它将像往常一样以“返回”结束。为了“收益”？它用于正则表达式匹配。这是必要的，但毫无用处。

它根本不是100%完美，但它至少实现了我的工作。我不得不提到使用这段代码时的一些限制。当代码被分成两部分时，“return”语句必须在外部，而不是在任何循环或{}中。即

function coroutine3() {
    this.a = 100;
    console.log('coroutine3-1:start');
    if(true) {
        return sleepFor(3000).yield;
    } // <- Raise an exception here
    console.log('coroutine3-2:complete');
    this.a++;
}

上述代码一定有问题，因为所创建的函数中不能单独存在右括号。另一个限制是“var xxx=123”声明的所有局部变量都不能传递到下一个函数。您必须使用“this.xxx=123”来实现相同的目标。如果您的函数有参数，并且它们发生了更改，则修改后的值也无法传递到下一个函数。

function coroutine4(x) { // Assume x=abc
    var z = x;
    x = 'def';
    console.log('coroutine4-1:start' + z + x); // z=abc, x=def
    return sleepFor(3000).yield;
    console.log('coroutine4-2:' + z + x); // z=undefined, x=abc
}

我将介绍另一个函数原型：waitFor

waitFor = function(check, ms) {
    var caller = arguments.callee.caller.toString();
    var funcArgs = /\(([\s\S]*?)\)/gi.exec(caller)[1];
    var args = arguments.callee.caller.arguments;
    var funcBody = caller.replace(/^[\s\S]*?waitFor[\s\S]*?yield;|}[\s;]*$/g,'');
    var context = this;
    var thread = setInterval(function() {
        if(check()) {
            clearInterval(thread);
            new Function(funcArgs, funcBody).apply(context, args);
        }
    }, ms?ms:100);
    return this;
}

它等待“check”函数，直到它返回true。它每100毫秒检查一次值。您可以通过传递额外的参数来调整它。考虑测试协程2：

function coroutine2(c) {
    /* Some code here */
    this.a = 1;
    console.log('coroutine2-1:' + this.a++);
    return sleepFor(500).yield;

    /* Next */
    console.log('coroutine2-2:' + this.a++);
    console.log('coroutine2-2:waitFor c.a>100:' + c.a);
    return waitFor(function() {
        return c.a>100;
    }).yield;

    /* The rest of the code */
    console.log('coroutine2-3:' + this.a++);
}

也是我们迄今为止喜爱的漂亮款式。实际上，我讨厌嵌套回调。很容易理解，协程2将等待协程1的完成。有趣的好的，然后运行以下代码：

this.a = 10;
console.log('outer-1:' + this.a++);
var c1 = new coroutine1();
var c2 = new coroutine2(c1);
console.log('outer-2:' + this.a++);

输出为：

outer-1:10
coroutine1-1:start
coroutine2-1:1
outer-2:11
coroutine2-2:2
coroutine2-2:waitFor c.a>100:100
coroutine1-2:complete
coroutine2-3:3

在初始化协程1和协程2后，立即完成外部。然后，协程1将等待3000毫秒。等待500毫秒后，子程序2将进入步骤2。之后，一旦检测到协程1.a值>100，它将继续执行步骤3。

请注意，有三种上下文可以保存变量“a”。一个是外部，值为10和11。另一个在协程1中，其值为100和101。最后一个在协程2中，其值为1、2和3。在协程2中，它还等待来自协程1的c.a，直到其值大于100。3个上下文是独立的。

复制和粘贴的完整代码：

sleepFor = function(ms) {
    var caller = arguments.callee.caller.toString();
    var funcArgs = /\(([\s\S]*?)\)/gi.exec(caller)[1];
    var args = arguments.callee.caller.arguments;
    var funcBody = caller.replace(/^[\s\S]*?sleepFor[\s\S]*?yield;|}[\s;]*$/g,'');
    var context = this;
    setTimeout(function() {
        new Function(funcArgs, funcBody).apply(context, args);
    }, ms);
    return this;
}

waitFor = function(check, ms) {
    var caller = arguments.callee.caller.toString();
    var funcArgs = /\(([\s\S]*?)\)/gi.exec(caller)[1];
    var args = arguments.callee.caller.arguments;
    var funcBody = caller.replace(/^[\s\S]*?waitFor[\s\S]*?yield;|}[\s;]*$/g,'');
    var context = this;
    var thread = setInterval(function() {
        if(check()) {
            clearInterval(thread);
            new Function(funcArgs, funcBody).apply(context, args);
        }
    }, ms?ms:100);
    return this;
}

function coroutine1() {
    this.a = 100;
    console.log('coroutine1-1:start');
    return sleepFor(3000).yield;
    console.log('coroutine1-2:complete');
    this.a++;
}

function coroutine2(c) {
    /* Some code here */
    this.a = 1;
    console.log('coroutine2-1:' + this.a++);
    return sleepFor(500).yield;

    /* next */
    console.log('coroutine2-2:' + this.a++);
    console.log('coroutine2-2:waitFor c.a>100:' + c.a);
    return waitFor(function() {
        return c.a>100;
    }).yield;

    /* The rest of the code */
    console.log('coroutine2-3:' + this.a++);
}

this.a = 10;
console.log('outer-1:' + this.a++);
var c1 = new coroutine1();
var c2 = new coroutine2(c1);
console.log('outer-2:' + this.a++);

它在Internet Explorer 11和Chrome 49中进行了测试。因为它使用arguments.callee，所以如果在严格模式下运行可能会有麻烦。

使用更好的DX实现更安全的异步睡眠

我使用睡眠进行调试。。。我忘了用wait太多次了。让我挠头。我在写下面的实时片段时忘记使用await。。。不再！

如果您在1毫秒内运行了两次，下面的睡眠功能会提醒您。如果您确定使用了await，它还支持传递一个相当的参数。它不会投掷，因此可以安全地用作睡眠的替代品。享受

是的，实时片段中有一个JavaScript版本。

// Sleep, with protection against accidentally forgetting to use await
export const sleep = (s: number, quiet?: boolean) => {
  const sleepId = 'SLEEP_' + Date.now()
  const G = globalThis as any
  if (G[sleepId] === true && !quiet) {
    console.error('Did you call sleep without await? use quiet to hide msg.')
  } else {
    G[sleepId] = true
  }
  return new Promise((resolve) => {
    !quiet && setTimeout(() => {
      delete G[sleepId]
    }, 1)
    setTimeout(resolve, (s * 1000) | 0)
  })
}

//睡眠，防止意外忘记使用等待常量睡眠=（s，安静）=>{constsleepId='SLEEP_'+Date.now（）const G=全局此if（G[sleepId]==true&&！quiet）{console.error（'您是否在没有等待的情况下调用sleep？使用quiet隐藏消息。'）}其他{G[sleepId]=真}return new Promise（（resolve）=>{!quiet&&setTimeout（（）=>{删除G[sleepId]}, 1)setTimeout（解析，（s*1000）|0）})}常量main=async（）=>{console.log（'休眠1秒…'）等待睡眠（1）console.log（'使用等待的目标…'）睡眠（99）睡眠（99）等待睡眠（1，true）console.log（“开发人员快乐！”）}main（）

与公认更容易阅读的相比：

const sleep = (s: number) =>
  new Promise((p) => setTimeout(p, (s * 1000) | 0))

2017-2021更新

自2009年提出这个问题以来，JavaScript已经有了很大的发展。所有其他答案现在都过时或过于复杂。以下是当前的最佳实践：

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

或作为一个内衬：

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

作为一项功能：

const sleep = ms => new Promise(r => setTimeout(r, ms));

或使用字体：

const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));

将其用作：

await sleep(<duration>);

演示：

功能睡眠（ms）{return new Promise（resol=>setTimeout（resolve，ms））；}异步函数demo（）{for（设i=0；i<5；i++）{console.log（`等待${i}秒…`）；等待睡眠（i*1000）；}console.log（'Done'）；}demo（）；

注意，

await只能在前缀为async关键字的函数中执行，或者在越来越多的环境中在脚本的顶层执行。await只暂停当前的异步函数。这意味着它不会阻止脚本的其余部分的执行，这在大多数情况下都是您想要的。如果您确实需要一个阻塞构造，请使用Atomics.wait查看这个答案，但请注意，大多数浏览器都不允许在浏览器的主线程上使用它。

两个新的JavaScript功能（截至2017年）帮助编写了这个“睡眠”函数：

Promises是ES2015（又称ES6）的原生功能。我们还在睡眠函数的定义中使用箭头函数。async/await特性允许代码显式地等待承诺（解决或拒绝）。

兼容性

承诺在Node v0.12+中得到支持，在浏览器中得到广泛支持，IE除外async/await登陆V8，自Chrome 55（2016年12月发布）以来默认启用它于2016年10月登陆Node 7并于2016年11月登陆Firefox Nightly

如果出于某种原因，您使用的Node早于7（已于2017年到期），或者针对的是旧浏览器，则仍可通过Babel（一种将JavaScript+新功能转换为普通旧JavaScript的工具）使用async/await，并使用将async-to-generator转换为生成器插件。