jQuery:コードを実行せずに1秒待機/遅延


129

.delayjQueryでメソッドを機能させることができません。

$.delay(3000); // not working
$(queue).delay(3000); // not working

私は、whileループを使用して、制御されていない変更値が別の値以上になるまで待機し、X秒間実行を停止する方法を見つけることができません。


コールバックでsetTimeoutを使用してみてください
theshadowmonkey

どのバージョンのjqueryを使用していますか?
L7ColWinters 2012年

1
これは、遅延関数が設計されたものではなく、キューに入れられたjqueryイベント(fade()。delay()。show()など)間で使用するように設計されています。setTimeOut関数が必要です。
JoJa

@JoJa:要点は正しいですが、引数なしの形式の表示(および非表示)では効果キューを使用しません。
ジェイトムテン

3
遅れて達成しようとしていることを述べてください。すべてのJavaScriptは単一のスレッドで実行され、X秒間フリーズすると、ユーザーエクスペリエンスに悪影響を与える可能性があります。
Dmitry Shkuropatsky 2012年

回答:


176

$ .delayは、実行を停止するのではなく、キュー内のアニメーションを遅延させるために使用されます。

whileループを使用する代わりに、次を使用して1秒ごとにチェックを実行するメソッドを再帰的に呼び出す必要がありますsetTimeout

var check = function(){
    if(condition){
        // run when condition is met
    }
    else {
        setTimeout(check, 1000); // check again in a second
    }
}

check();

1
setTimeoutで十分だと思います。
Jiemurat 2013年

3
あなたの爆弾仲間、これはまさに私のコードを修正するために必要なものです。
jemiloii 14

@Jiemuratおよび将来的には誰でも:setTimeoutは実行のフローを中断しません。条件が真になるまで、ニースナーの素晴らしいコードはこれを取得します!
Gabrer、2014

実行の流れを中断する必要がない場合は、単にを使用できますsetTimeout()
Joshua Pinter、2015年

私はいつも私のチェック機能はかかわらず、2つのパラメータがあり、「チェックは関数ではありません」を取得
ブラック

211

次のように操作を遅らせることもできます。

setTimeout(function (){

  // Something you want delayed.

}, 5000); // How long do you want the delay to be (in milliseconds)? 

7
参考までに、これは実行のフローを中断しないので、数秒間「すべてを停止」する必要がある場合は、Niessnerが投稿したようなものが必要になります。
Joshua Pinter、2015年

はい...それは関数へのコールバックであり、ブロックしません。答えをありがとう、それは私の問題を修正しました。
Bertus Kruger

頻度が非常に短く、この関数が永久に実行されると予想される場合、最終的にスタックを爆破しますか?
スーサイドバニー

16

ES6 setTimeout

setTimeout(() => {
  console.log("we waited 204586560000 ms to run this code, oh boy wowwoowee!");
}, 204586560000);

編集:204586560000 msは、元の質問とこの回答の間のおおよその時間です...私が正しく計算したと仮定します。


2
元の質問からこの回答までのおおよその時間を使って本当にいい
Fuzzybear

9

jQueryのdelay関数は、エフェクトとエフェクトキューで使用するためのものです。delayドキュメントとその中の例を参照してください。

$('#foo').slideUp(300).delay(800).fadeIn(400);

変数の変化を観察したい場合は、次のようにすることができます

(function() {
    var observerInterval = setInterval(function() {
        if (/* check for changes here */) {
           clearInterval(observerInterval);
           // do something here
        }
    }, 1000);
})();

setIntervalには2番目の必須パラメーター、ミリ秒単位の時間;)
sara_thepot

1
ありがとう、@ sara.potyscki、修正。
ジュリアンD.

@JulianD。この提案をありがとう。私は解決策を探している間にこの質問に行き着きました。これはまさに私のプロジェクトに必要なものです。
シェリルベレス

8

JavaScript setTimeoutは非常に優れたソリューションです。

function funcx()
   {
   // your code here
   // break out here if needed
   setTimeout(funcx, 3000);
   }

funcx();

delayjQuery の関数は主に、jQueryアニメーションキュー内のアニメーションを遅延させるために使用されます。


5

delay()コードの流れを停止してから再実行しません。JavaScriptでこれを行う実用的な方法はありません。setTimeout他の人が言及したようなコールバックを取る関数ですべてを行う必要があります。

jQueryの目的は、delay()実行前にアニメーションキューを待機させることです。たとえば$(element).delay(3000).fadeIn(250);、3秒後に要素がフェードインします。


5

JavaScriptのみjQueryなしで動作します

<!DOCTYPE html>
<html>
    <head>
        <script>
            function sleep(miliseconds) {
                var currentTime = new Date().getTime();
                while (currentTime + miliseconds >= new Date().getTime()) {
                }
            }

            function hello() {
                sleep(5000);
                alert('Hello');
            }
            function hi() {
                sleep(10000);
                alert('Hi');
            }
        </script>
    </head>
    <body>
        <a href="#" onclick="hello();">Say me hello after 5 seconds </a>
        <br>
        <a href="#" onclick="hi();">Say me hi after 10 seconds </a>


    </body>
</html>

1
JavaScriptで待機するためにループするのは悪い考えです!ループの実行中は、すべてのJavaScript機能が停止します。これには予期しない副作用があります。setTimeout()などの非ブロッキング関数を使用する方がはるかに優れています。
Kevin G.

4

JavaScriptは非同期プログラミング言語なので、しばらく実行を停止することはできません。実行を[疑似]停止できる唯一の方法は、遅延ではなく「遅延関数コールバック」であるsetTimeout()を使用することです。


2

ES6の機能を使用していて、非同期関数を使用している場合は、この関数を使用して、コードの実行を一定時間効果的に停止できます。

const delay = millis => new Promise((resolve, reject) => {
  setTimeout(_ => resolve(), millis)
});

これはあなたがそれを使う方法です:

await delay(5000);

要求されたミリ秒の間ストールしますが、非同期関数の場合のみです。以下の例:

const myFunction = async function() {
  // first code block ...

  await delay(5000);

  // some more code, executed 5 seconds after the first code block finishes
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.