JavaScriptを使用して特定の遅延後にスクリプトを実行する
-
09-06-2019 - |
質問
jQuery delay()
または wait()
に似たJavaScriptメソッドはありますか(特定の時間スクリプトの実行を遅らせるため)?
解決
他のヒント
setTimeout
について他の誰もが言ったことに追加するだけです。
将来、パラメータを使用して関数を呼び出す場合は、匿名の関数呼び出しを設定する必要があります。
後で呼び出すために、関数を引数として渡す必要があります。実際には、これは名前の後ろに括弧がないことを意味します。次はアラートを一度に呼び出し、「Hello world」を表示します:
var a = "world";
setTimeout(alert("Hello " + a), 2000);
これを修正するには、(Flubbaが行ったように)関数の名前を入力するか、匿名関数を使用します。パラメータを渡す必要がある場合は、匿名関数を使用する必要があります。
var a = "world";
setTimeout(function(){alert("Hello " + a)}, 2000);
a = "Stack Overflow";
ただし、そのコードを実行すると、2秒後にポップアップに「Hello Stack Overflow」と表示されます。これは、変数aの値がこれらの2秒間で変化したためです。 2秒後に「Hello world」と言うには、次のコードスニペットを使用する必要があります。
function callback(a){
return function(){
alert("Hello " + a);
}
}
var a = "world";
setTimeout(callback(a), 2000);
a = "Stack Overflow";
2秒待ってから、「Hello world」をポップアップします。
少し拡張します... setTimeout
呼び出しで直接コードを実行できますが、 @ patrick によると、通常、このようなコールバック関数を割り当てます。時間はミリ秒です
setTimeout(func, 4000);
function func() {
alert('Do stuff here');
}
ブロッキング(同期) delay
関数(とにかく)が本当に必要な場合は、次のようなことをしてください:
<script type="text/javascript">
function delay(ms) {
var cur_d = new Date();
var cur_ticks = cur_d.getTime();
var ms_passed = 0;
while(ms_passed < ms) {
var d = new Date(); // Possible memory leak?
var ticks = d.getTime();
ms_passed = ticks - cur_ticks;
// d = null; // Prevent memory leak?
}
}
alert("2 sec delay")
delay(2000);
alert("done ... 500 ms delay")
delay(500);
alert("done");
</script>
setTimeout を使用して、コールバック関数を渡す必要があります。 javascriptでsleepを使用できない理由は、その間はページ全体が何もしないようにブロックするためです。良い計画ではありません。 Javascriptのイベントモデルを使用して、満足してください。戦わないでください!
window.setInterval()を使用して、定期的に繰り返しコーディングします。
以前のコメントを追加するには、次のように言いたいと思います:
JavaScriptの setTimeout()
関数は、スクリプト自体の実行を一時停止するのではなく、将来コードを実行するようコンパイラーに指示するだけです。
JavaScriptに組み込まれた実行を実際に一時停止できる関数はありません。ただし、 Date()
関数を使用し、必要な時間間隔を追加することにより、時間に達するまで無条件ループのように動作する独自の関数を作成できます。
遅延のみをテストする必要がある場合は、これを使用できます:
function delay(ms) {
ms += new Date().getTime();
while (new Date() < ms){}
}
そして、2秒間遅らせたい場合:
delay(2000);
ただし、実稼働には最適ではない場合があります。詳細はコメントで
なぜ約束の背後にコードを置くことができないのですか? (頭のてっぺんから入力)
new Promise(function(resolve, reject) {
setTimeout(resolve, 2000);
}).then(function() {
console.log('do whatever you wanted to hold off on');
});
簡単な返信:
setTimeout(
function () {
x = 1;
}, 1000);
上記の関数は1秒(1000ミリ秒)待機してから、xを1に設定します。 明らかにこれは例です。無名関数内で何でもできます。
setTimeout
を呼び出すための3つの異なるメソッドを使用したMauriusの説明(最も高い投票された応答)が本当に気に入りました。
私のコードでは、AJAX保存イベントの完了時に前のページに自動的にナビゲートしたいと考えています。保存イベントが完了すると、CSSにわずかなアニメーションが表示され、保存が成功したことが示されます。
私のコードで、最初の2つの例の違いを見つけました:
setTimeout(window.history.back(), 3000);
これはタイムアウトを待機しません。back()は、遅延のために何を入力してもほとんどすぐに呼び出されます。
ただし、これを次のように変更します。
setTimeout(function() {window.history.back()}, 3000);
これは、私が望んでいたこととまったく同じです。
これはback()操作に固有のものではなく、 alert()
でも同じことが起こります。基本的に、最初のケースで使用される alert()
では、遅延時間は無視されます。ポップアップを閉じると、CSSのアニメーションが続行されます。
したがって、組み込み関数を使用し、引数を使用しない場合でも、彼が説明する2番目または3番目の方法をお勧めします。
間に遅延を発生させて実行したいajaxコマンドがいくつかありました。これを行う1つの方法の簡単な例を次に示します。私の型にはまらないアプローチのために、私は細断処理にリッピングされる準備ができています。 :)
// Show current seconds and milliseconds
// (I know there are other ways, I was aiming for minimal code
// and fixed width.)
function secs()
{
var s = Date.now() + ""; s = s.substr(s.length - 5);
return s.substr(0, 2) + "." + s.substr(2);
}
// Log we're loading
console.log("Loading: " + secs());
// Create a list of commands to execute
var cmds =
[
function() { console.log("A: " + secs()); },
function() { console.log("B: " + secs()); },
function() { console.log("C: " + secs()); },
function() { console.log("D: " + secs()); },
function() { console.log("E: " + secs()); },
function() { console.log("done: " + secs()); }
];
// Run each command with a second delay in between
var ms = 1000;
cmds.forEach(function(cmd, i)
{
setTimeout(cmd, ms * i);
});
// Log we've loaded (probably logged before first command)
console.log("Loaded: " + secs());
コードブロックをコピーしてコンソールウィンドウに貼り付けると、次のように表示されます。
Loading: 03.077
Loaded: 03.078
A: 03.079
B: 04.075
C: 05.075
D: 06.075
E: 07.076
done: 08.076
遅延を使用して関数を呼び出す最も簡単な解決策は次のとおりです。
function executeWithDelay(anotherFunction) {
setTimeout(anotherFunction, delayInMilliseconds);
}
他の人が言ったように、setTimeoutは最も安全な賭けです
ただし、ロジックを新しい関数に分離できない場合は、Date.now()を使用してミリ秒を取得し、自分で遅延を行うことができます。...
function delay(milisecondDelay) {
milisecondDelay += Date.now();
while(Date.now() < milisecondDelay){}
}
alert('Ill be back in 5 sec after you click ok....');
delay(5000);
alert('im back ' +new Date());