我也搜索了一个睡眠解决方案（不用于生产代码，只用于开发和测试），并找到了这篇文章：

JavaScript sleep（）或wait（）

…还有一篇关于客户端解决方案的文章：JavaScript睡眠

此外，当您调用alert（）时，代码也会暂停，同时显示警报——您需要找到一种方法来不显示警报，但获得相同的效果。：）

我也搜索了一个睡眠解决方案（不用于生产代码，只用于开发和测试），并找到了这篇文章：

JavaScript sleep（）或wait（）

…还有一篇关于客户端解决方案的文章：JavaScript睡眠

此外，当您调用alert（）时，代码也会暂停，同时显示警报——您需要找到一种方法来不显示警报，但获得相同的效果。：）

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版本是什么做出了类似的回答？。

在JavaScript中，我重写了每个函数，以便它能够尽快结束。您希望浏览器恢复控制，以便它可以更改DOM。

每次我想在函数中间休眠时，我都会重构以使用setTimeout（）。

Edit

任何语言中臭名昭著的睡眠或延迟功能都备受争议。有些人会说，应该总是有一个信号或回调来启动给定的功能，而另一些人会认为，有时任意的延迟时间是有用的。我说，每个人都有自己的规则，在这个行业中，一条规则永远无法支配任何事情。

编写睡眠函数很简单，而且使用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!
});

我有这个问题很久了，我需要的答案并不完全是这里提供的。此等待函数会导致同步等待，而不会占用CPU。

函数waitForIt向任何地方发出Ajax请求，并将异步标志设置为false。函数waitF对一个帧执行相同的操作，函数waitD对一个div执行相同的处理。Ajax大约需要100毫秒，frame大约是25，div大约是1。

wait函数根据您给它的时间来利用所有这些。如果它等待的时间不够长，请再次执行。

在处理多个异步加载元素时，我需要这个。基本上是“等待此元素存在”。你可以在https://jsfiddle.net/h2vm29ue/.它只是利用了浏览器自然等待的东西。较长的版本，https://jsfiddle.net/5cov1p0z/32/，更精确。

 function waitForIt() {
     var start = new Date();
     var xhttp = new XMLHttpRequest();
     xhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
            // Doesn't matter
         }
     };
     xhttp.open("GET", "WaitForIt", false);
     xhttp.send();
     var end = new Date();
 }
 //

 function waitF() {
     var start = new Date();
     var ifram = document.createElement('iframe');
     ifram.id = 'ifram';
     ifram.src = '';
     var div = document.createElement('div');
     div.id = 'timer';
     document.body.appendChild(div);
     document.getElementById('timer').appendChild(ifram);
     document.getElementById('timer').removeChild(ifram);
     document.body.removeChild(div);
     var end = new Date();
     return (end - start);
 }


 function waitD() {
     var start = new Date();
     var div = document.createElement('div');
     div.id = 'timer';
     document.body.appendChild(div);
     div.click();
     document.body.removeChild(div);
     var end = new Date();
     return (end - start);
 }

 function wait(time) {
     var start = new Date();
     var end = new Date();
     while ((end - start < time)) {

         if ((time - (end - start)) >= 200) {
             waitForIt();
         } else {
             if ((time - (end - start)) >= 50) {
                 waitF();
             } else {
                 waitD();
             }
         }
         end = new Date();
     }
     return (end - start);
 }

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