JavaScriptを使用して特定の遅延後にスクリプトを実行する


189

jQuery delay()またはwait()(スクリプトの実行を特定の時間遅延させる)に似たJavaScriptメソッドはありますか?

回答:


189

以下があります。

setTimeout(function, milliseconds);

関数が実行されるまでの時間を渡すことができる関数。

参照:ウィンドウsetTimeout()メソッド


3
実行されるのは式ではなく、関数です。@Mariusの答えはそれを示しています。
pedrofurla 2012年

117
これは遅延ではなく、分岐です。遅延は同じスレッドで機能するはずです。
DragonLord、2012年

13
これはすぐにfunction_referenceを実行します。「非同期」で動作するには、次のように記述します。setTimeout(function(){MethodToCall();}、1000);
ベルヌーイIT

6
JavaScriptについて話していることを指摘したいと思います。「スレッド」を起動する、または「同期的に」機能することは、技術的に意味的にも真実かもしれませんが、JavaScriptのコンテキスト内に実際には適合しません。 t他の言語で行うように、JSで「スレッド」を作成します。また、これfunction_referenceを含めない限り、これはすぐには実行されません()。つまりはfunction_referenceそういうことだ-参照。渡すとfunction_reference()、関数がすぐに呼び出されます。
ダニーブリス2015年

237

他の誰もが言ったことに追加するだけです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」と表示されます。これは、この2秒間で変数aの値が変化したためです。2秒後に「Hello world」と表示するには、次のコードスニペットを使用する必要があります。

function callback(a){
    return function(){
        alert("Hello " + a);
    }
}
var a = "world";
setTimeout(callback(a), 2000);
a = "Stack Overflow";

2秒待ってから、「Hello world」をポップアップします。


37

少し拡張するだけ... setTimeout呼び出しでコードを直接実行できますが、@ patrickが言うように、通常は次のようにコールバック関数を割り当てます。時間はミリ秒です

setTimeout(func, 4000);
function func() {
    alert('Do stuff here');
}

27

ブロッキング(同期)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>

2
このソリューションの難点は、プロセッサーを積極的に使用することです。これにより、電力使用量が増加し、他のスレッド/プロセス(他のタブ、他のプログラムなど)が利用できるリソースが減少します。対照的に、スリープは、スレッドによるシステムリソースの使用を一時的に中断します。
ramcdougal 14

1
new Date()の代わりにDate.now()を使用し、メモリリークを
考慮

1
もちろん、CPUを集中的に使用しますが、迅速でダーティなテストに
Maris B.

スレッドをロックしないバージョンが欲しいので、delayこの質問に答えるために)を実行する前にDOMを更新できます。そうする方法はありますか?
今村桂

3
よりコンパクトなルーチン:function delay(ms){var start_time = Date.now(); while(Date.now()-start_time <ms); }
デューク、

15

setTimeoutを使用し、それにコールバック関数を渡す必要があります。JavaScriptでスリープを使用できないのは、その間ページ全体が何もしないようにブロックするためです。良い計画ではありません。JavaScriptのイベントモデルを使用して、満足してください。戦わないで!


2
それでも、テスト目的には役立ちます。フォームの送信を数秒間遅らせて、新しいHTTPリクエストが行われる前にページの変更を評価するようなものです。
2013年

1
次に@rushingeがコールバックを設定してフォームを送信し、デフォルトのフォーム送信を無効にします
Populus

1
リンクをコードのままにしておくのは悪い考えです。今は機能しません。
Emmet Arries 2016年

1
または、あなたが知っている、私はそれを修正することができます。
Patrick

14

また、window.setInterval()を使用して、一定の間隔でコードを繰り返し実行することもできます。


2
setInterval()は使用すべきではなく、代わりにsetTimeoutを使用する必要があります
ポール

9
setTimeout()一度setInterval()それを繰り返します。5秒ごとにコードを実行したい場合setInterval()は、ジョブ用に作成されます。
rcoup

11

以前のコメントを追加するために、私は次のように述べたいと思います:

setTimeout()JavaScript の関数は、スクリプト自体の実行を一時停止するのではなく、将来いつかコードを実行するようコンパイラーに指示するだけです。

JavaScriptに組み込まれている実行を実際に一時停止できる関数はありません。ただし、関数を使用してDate()必要な時間間隔を追加することにより、時間に達するまで無条件ループのような処理を行う独自の関数を作成できます。


11

遅延をテストするだけの場合は、これを使用できます。

function delay(ms) {
   ms += new Date().getTime();
   while (new Date() < ms){}
}

そして、2秒間遅延させたい場合は、次のようにします。

delay(2000);

しかし、生産には最適ではないかもしれません。詳しくはコメントで


@ U2744 SNOWFLAKEコメントでもう少し正確にしてみてください
Christoffer

1
まあ、それはラップトップや他のモバイルデバイスのバッテリーを消耗し、おそらくUIが応答(または表示)するのを妨げるビジーループです。
Ry-

@ U2744SNOWFLAKE理にかなっています。この関数を何のために使用したかについて、答えを更新しました:)
Christoffer

2
迅速で汚れた(そして一時的な)ソリューションを開発するのに十分に機能します。
HumanInDisguise 2015

5

コードをプロミスの背後に配置できないのはなぜですか?(頭の上から打ち込んだ)

new Promise(function(resolve, reject) {
  setTimeout(resolve, 2000);
}).then(function() {
  console.log('do whatever you wanted to hold off on');
});


5

簡単な返信は次のとおりです。

setTimeout(
    function () {
        x = 1;
    }, 1000);

上記の関数は1秒(1000ミリ秒)待機してから、xを1に設定します。明らかにこれは例です。あなたは無名関数の中で好きなことをすることができます。


4

を呼び出すための3つの異なるメソッドを使用したMauriusの説明(最高の賛成投票)が本当に気に入りましたsetTimeout

私のコードでは、AJAX保存イベントの完了時に前のページに自動的に移動します。保存イベントが完了すると、CSSにわずかなアニメーションが表示され、保存が成功したことが示されます。

私のコードで、最初の2つの例の違いを見つけました:

setTimeout(window.history.back(), 3000);

これはタイムアウトを待ちません-遅延のために何を入れても、back()はほとんどすぐに呼び出されます。

ただし、これを次のように変更します。

setTimeout(function() {window.history.back()}, 3000);

これはまさに私が望んでいたことを行います。

これはback()オペレーションに固有のものではなく、同じことがで発生しalert()ます。基本的にalert()最初のケースで使用されている場合、遅延時間は無視されます。ポップアップを閉じると、CSSのアニメーションが続きます。

したがって、引数を使用せずに組み込み関数を使用している場合でも、彼が説明する2番目または3番目の方法をお勧めします。


1

少し遅れて実行したい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

1

関数を遅延して呼び出す最も簡単な解決策は次のとおりです。

function executeWithDelay(anotherFunction) {
    setTimeout(anotherFunction, delayInMilliseconds);
}

0

遅延機能:

/**
 * delay or pause for some time
 * @param {number} t - time (ms)
 * @return {Promise<*>}
 */
const delay = async t => new Promise(resolve => setTimeout(resolve, t));

async関数内での使用:

await delay(1000);

-1

他にも言われているように、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 # date:' +new Date());

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.