有没有比下面的pausecomp函数（取自此处）更好的方法来设计JavaScript中的睡眠？
function pausecomp(millis)
{
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
}
这不是JavaScript中的Sleep的重复-动作之间的延迟；我希望在函数的中间有一个真正的睡眠，而不是在代码执行之前有一段延迟。
当前回答
我也遇到过类似的问题，必须等待控件的存在并每隔一段时间进行检查。由于JavaScript中没有真正的休眠、等待或暂停，并且Internet Explorer中不正确支持使用wait/async，因此我使用setTimeOut并注入函数以成功找到元素。以下是完整的示例代码，因此每个人都可以复制并将其用于自己的项目：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var ElementSearchStatus = {
None: 0,
Found: 1,
NotFound: 2,
Timeout: 3
};
var maxTimeout = 5;
var timeoutMiliseconds = 1000;
function waitForElement(elementId, count, timeout, onSuccessFunction) {
++count;
var elementSearchStatus = existsElement(elementId, count, timeout);
if (elementSearchStatus == ElementSearchStatus.None) {
window.setTimeout(waitForElement, timeoutMiliseconds, elementId, count, timeout, onSuccessFunction);
}
else {
if (elementSearchStatus == ElementSearchStatus.Found) {
onSuccessFunction();
}
}
}
function existsElement(elementId, count, timeout) {
var foundElements = $("#" + elementId);
if (foundElements.length > 0 || count > timeout) {
if (foundElements.length > 0) {
console.log(elementId + " found");
return ElementSearchStatus.Found;
}
else {
console.log("Search for " + elementId + " timed out after " + count + " tries.");
return ElementSearchStatus.Timeout;
}
}
else {
console.log("waiting for " + elementId + " after " + count + " of " + timeout);
return ElementSearchStatus.None;
}
}
function main() {
waitForElement("StartButton", 0, maxTimeout, function () {
console.log("found StartButton!");
DoOtherStuff("StartButton2")
});
}
function DoOtherStuff(elementId) {
waitForElement(elementId, 0, maxTimeout, function () {
console.log("found " + elementId);
DoOtherStuff("StartButton3");
});
}
</script>
</head>
<body>
<button type="button" id="StartButton" onclick="main();">Start Test</button>
<button type="button" id="StartButton2" onclick="alert('Hey ya Start Button 2');">Show alert</button>
</body>
</html>
其他回答
对于浏览器，我同意使用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');
参见：Node.js光纤，睡眠
我建议以前的python开发人员使用此方法
const sleep = (time) => {
return new Promise((resolve) => setTimeout(resolve, Math.ceil(time * 1000)));
};
用法：
await sleep(10) // for 10 seconds
在LiveScript（编译为JavaScript）中，可以执行以下操作：
sleep = (ms, func) -> set-timeout func, ms
console.log "hello-1"
<- sleep 2000ms
console.log "hello-2"
<- sleep 2000ms
console.log "hello-3"
我更喜欢这种功能型的单线睡眠功能：
const sleep = (ms) => new Promise((res) => setTimeout(res, ms, ms));
// usage
async function main() {
console.log("before");
const t = await sleep(10_000); /* 10 sec */
console.log("after " + t);
}
main();
如果您真的需要等待那么多秒，那么当前接受的使用async/await和setTimeout的解决方案是完美的。然而，如果您将其用于屏幕动画，则应该真正使用requestAnimationFrame（）。此函数的功能与setTimeout非常相似，但回调仅在用户可见动画时调用。这意味着，如果您在网站上运行动画，并且用户切换选项卡，动画将暂停并节省电池寿命。
这里是使用requestAnimationFrame的wait方法的实现。它接收多个帧，并在它们全部通过后解析：
常量动画等待=（帧）=>新承诺（（决心）=>{让framesPassed=0；requestAnimationFrame（函数循环（）{如果（++framesPassed>=帧）返回resolve（）；requestAnimationFrame（循环）；});});//演示用打字机效果const content=document.querySelector（“.content”）；异步函数类型Writer（endText，等待）{content.textContent=“”；for（const letter of endText）{content.textContent+=字母；wait animationWait（等待）；}}typeWriter（“好的。这个简单的打字机效果是requestAnimationFrame的一个例子。”，8）；<p>动画将在下面播放；尝试切换选项卡并查看动画暂停。</p><code class=“content”></code>
阅读有关requestAnimationFrame的更多信息
浏览器支持（IE10+）
