JavaScriptでスリープ-アクション間の遅延
別のアクションを実行する前にJavaScriptでスリープ状態にする方法はありますか？
例：
var a = 1+3;
// Sleep 3 seconds before the next action here
var b = a + 4;
setTimeoutを使用して、同様の効果を実現できます。
var a = 1 + 3;
var b;
setTimeout(function() {
b = a + 4;
}, (3 * 1000));
これは実際にはJavaScriptを「スリープ」させません。特定の期間（ミリ秒単位で指定）後にsetTimeoutに渡された関数を実行するだけです。 JavaScript用のスリープ関数を作成することは可能ですが、可能であれば、スリープ期間中にすべてをフリーズしないため、setTimeoutを使用するのが最善です。
何かをテストするためだけにsleep()が本当に必要な場合に。ただし、debugginを実行している間はほとんどの場合ブラウザがクラッシュすることに注意してください。おそらくそれが必要な理由です。本番モードでは、この機能をコメントアウトします。
_function pauseBrowser(millis) {
var date = Date.now();
var curDate = null;
do {
curDate = Date.now();
} while (curDate-date < millis);
}
_メモリ、処理能力、バッテリー、そしておそらくデバイスの寿命を無駄にしたくない限り、ループでnew Date()を使用しないでください。
ECMAScript 6バージョン、「コードブロック」のyieldを使用したジェネレーターを使用：
元の質問は7年前に投稿されたので、正確なコードで答えることを気にしませんでした。これは、少なくとも2つのスリープが必要な場合や、非同期実行のシーケンスを計画している場合など、より複雑な問題に役立つはずです。ニーズに合わせて自由に変更してください。
let sleeptime = 100
function* clock()
{
let i = 0
while( i <= 10000 )
{
i++
console.log(i); // actually, just do stuff you wanna do.
setTimeout(
()=>
{
clk.next()
}
, sleeptime
)
yield
}
}
let clk = clock()
clk.next()（ >矢印関数）==
Promises でイベントをチェーンすることもできます：
function sleep(ms)
{
return(
new Promise(function(resolve, reject)
{
setTimeout(function() { resolve(); }, ms);
})
);
}
sleep(1000).then(function()
{
console.log('1')
sleep(1000).then(function()
{
console.log('2')
})
})または、はるかに単純で空想的な方法は
function sleep(ms, f)
{
return(
setTimeout(f, ms)
)
}
sleep(500, function()
{
console.log('1')
sleep(500, function()
{
console.log('2')
})
})
console.log('Event chain launched')何らかの条件が発生するのを待っているだけなら、このように待つことができます
function waitTill(condition, thenDo)
{
if (eval(condition))
{
thenDo()
return
}
setTimeout(
() =>
{
waitTill(condition, thenDo)
}
,
1
)
}
x=0
waitTill(
'x>2 || x==1'
,
() =>
{
console.log("Conditions met!")
}
)
// Simulating the change
setTimeout(
() =>
{
x = 1
}
,
1000
)2018アップデート
最新のSafari、Firefox、Node.jsもasync/await/promisesをサポートしています。
2017アップデート
この質問が出されてからJavaScriptが進化し、ジェネレーター関数が追加され、新しいasync/await/Promiseが展開されています。以下に2つのソリューションがあります。1つはすべての最新のブラウザーで動作するジェネレーター機能を備え、もう1つはどこでもまだサポートされていない新しいasync/awaitを使用します。
ジェネレーター関数の使用：
'use strict';
let myAsync = (g) => (...args) => {
let f, res = () => f.next(),
sleep = (ms) => setTimeout(res, ms);
f = g.apply({sleep}, args); f.next();
};
let myAsyncFunc = myAsync(function*() {
let {sleep} = this;
console.log("Sleeping");
yield sleep(3000);
console.log("Done");
});
myAsyncFunc();Async/await/Promisesを使用：
（2017年1月現在、Chromeでサポートされていますが、Safari、Internet Explorer、Firefox、Node.jsではサポートされていません）
'use strict';
function sleep(ms) {
return new Promise(res => setTimeout(res, ms));
}
let myAsyncFunc = async function() {
console.log('Sleeping');
await sleep(3000);
console.log('Done');
}
myAsyncFunc();これらのソリューションは両方とも本質的に非同期であるという事実に注意してください。これは、myAsyncFunc（両方の場合）がスリープ中に戻ることを意味します。
この質問はsleep（）のJavaScriptバージョンとは？とは異なることに注意することが重要ですアクション間の遅延ではなく、実際のスリープ（プロセスで他のコード実行は行わない）を要求します。
setTimeoutやsetIntervalよりも不格好な関数が必要な場合は、引数の順序を逆にするだけで関数にラップし、それらにNice名を付けることができます。
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ミリ秒ごと、...」）
もう1つの方法は、PromiseとsetTimeoutを使用することです（関数内にいて、asyncキーワードで非同期として設定する必要があることに注意してください）：
async yourAsynchronousFunction () {
var a = 1+3;
await new Promise( (resolve) => {
setTimeout( () => { resolve(); }, 3000);
}
var b = a + 4;
}
この機能を試してください：
function delay(ms, cb) { setTimeout(cb, ms) }
Babelを使用している場合：
const delay = (ms, cb) => setTimeout(cb, ms)
使用方法は次のとおりです。
console.log("Waiting for 5 seconds.")
delay(5000, function() {
console.log("Finished waiting for 5 seconds.")
})
デモ です。
これは、ジェネレーター関数（ES6）を使用してJavaScriptで「スリープ」または「DoEvents」する方法を示す私のモデルです。コメントされたコード：
<html>
<head>
<script>
"use strict"; // always
// Based on post by www-0av-Com https://stackoverflow.com/questions/3143928
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*
var divelt, time0, globaln = 0; // global variables
var MainGenObj = Main(); // generator object = generator function()
window.onload = function() {
divelt = document.getElementsByTagName("body")[0]; // for addline()
addline("typeof Main: " + typeof Main);
addline("typeof MainDriver: " + typeof MainDriver);
addline("typeof MainGenObj: " + typeof MainGenObj);
time0 = new Date().valueOf(); // starting time ms
MainDriver(); // do all parts of Main()
}
function* Main() { // this is "Main" -- generator function -- code goes here
// could be loops, or inline, like this:
addline("Part A, time: " + time() + ", " + ++globaln); // part A
yield 2000; // yield for 2000 ms (like sleep)
addline("Part B, time: " + time() + ", " + ++globaln); // part B
yield 3000; // yield for 3000 ms (or like DoEvents)
addline("Part Z, time: " + time() + ", " + ++globaln); // part Z (last part)
addline("End, time: " + time());
}
function MainDriver() { // this does all parts, with delays
var obj = MainGenObj.next(); // executes the next (or first) part of Main()
if (obj.done == false) { // if "yield"ed, this will be false
setTimeout(MainDriver, obj.value); // repeat after delay
}
}
function time() { // seconds from time0 to 3 decimal places
var ret = ((new Date().valueOf() - time0)/1000).toString();
if (ret.indexOf(".") == -1) ret += ".000";
while (ret.indexOf(".") >= ret.length-3) ret += "0";
return ret;
}
function addline(what) { // output
divelt.innerHTML += "<br />\n" + what;
}
</script>
</head>
<body>
<button onclick="alert('I\'m alive!');"> Hit me to see if I'm alive </button>
</body>
</html>
この問題を解決するにはいくつかの方法があります。 setTimeout関数を使用する場合、最初にそれを理解しましょう。 この関数 には3つのパラメーターがあります：functionまたはcode、delay（ミリ秒単位）およびparameters。 functionまたはcodeパラメーターが必須であるため、他はオプションです。 delayを入力しないと、ゼロに設定されます。
setTimeout()このリンクに移動 の詳細については。
簡易版：
var a = 1 + 3;
var b;
console.log('a = ' + a);
setTimeout(function(){
b = a + 4;
console.log('b = ' + b);
}, 1000);
出力：
a = 4
24->アクティブタイムアウトのリストの番号識別子
b = 8
パラメーターパスの使用：
var a = 1 + 3;
var b;
console.log('a = ' + a);
setTimeout(myFunction, 1000, a);
function myFunction(a)
{
var b = a + 4;
console.log('b = ' + b);
}
出力：
a = 4
25->アクティブタイムアウトのリストの番号識別子
b = 8
ブラウザのサポート：
Chrome Firefox Edge Safari Opera 1.0 1.0 4.0 1.0 4.0
同期スリープ/一時停止のように「感じる」が、合法的なjs非同期コードである非常に簡単な方法を次に示します。
// Create a simple pause function
const pause = (timeoutMsec) => new Promise(resolve => setTimeout(resolve,timeoutMsec))
async function main () {
console.log('starting');
// Call with await to pause. Note that the main function is declared asyc
await pause(3*1000)
console.log('done');
}