•  06-09-2019
  •  | 
  •  

質問

調査を実施しているのは、同じように、これらの二つのjavascriptを振る舞うことになり

オプション：

function myTimeoutFunction()
{
    doStuff();
    setTimeout(myTimeoutFunction, 1000);
}

myTimeoutFunction();

オプションB：

function myTimeoutFunction()
{
    doStuff();
}

myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);

違いはありま利用 setTimeout や setInterval?

役に立ちましたか？

解決

彼らは、本質的に同じことをやろう、しかしsetIntervalは、1000ミリ秒の待機関数を実行し、別のタイムアウトを設定しますので、setTimeoutアプローチは、setTimeoutのアプローチよりも正確になります。 （あなたの関数の実行に時間がかかる場合や、より多くの）だから、待機期間は、実際に1000ミリ秒よりも少しです。

すべての1000ミリ秒の正確の1がsetIntervalが実行されることを考えるかもしれないAltough、そのsetIntervalに注意することが重要であるJavaScriptがあることを意味マルチスレッド言語、ではないためにも、遅れることになります - があればスクリプトの実行中の他の部分がある - 。間隔がフィニッシュにそれを待つ必要があります。

期間中は、

このフィドルのでは、あなたは、タイムアウトが背後に落ちることをはっきりと見ることができますほぼ1コール/秒（スクリプトがやろうとしている）、ほぼすべての時間。あなたは20のような小さなものにトップスピードの変数を変更した場合（これは、毎秒50回実行しようとするという意味）、間隔がかなり毎秒50回の反復の平均に到達することはありません。

遅延はほとんど常に無視できる程度ですが、あなたが本当に正確な何かをプログラミングしている場合、あなたは基本的に常にのために自分自身を調整し、タイムアウトベースのタイマーである（の自己調整タイマーのために行く必要があります遅延は、それが作成されています）。

他のヒント

  

何か違いはありますか？

はい。タイムアウトのsetTimeout（）が呼び出された後、ある程度の時間を実行します。前の間隔は、焼成後の間隔は、一定の時間を実行します。

あなたのdoStuff（）関数の実行には時間がかかる場合は、

あなたは違いに気づくでしょう。

：我々は.とのsetTimeout /のsetIntervalコール、*と[-----]とJavaScriptコードの実行にタイムアウト/インターバルの発火を表した場合、タイムラインは次のようになり 
Timeout:

.    *  .    *  .    *  .    *  .
     [--]    [--]    [--]    [--]

Interval:

.    *    *    *    *    *    *
     [--] [--] [--] [--] [--] [--]
JavaScriptをしながら間隔火災が（例えば前の間隔を扱うような）何かをすでにビジー状態の場合、

次の合併症です。この場合、間隔は思い出し、とすぐ前のハンドラが終了し、リターンがブラウザにコントロールとして起こります。

：（[-----]） - （[]）、時には長いので、例えば、時には短いdoStuff（）処理のための 
.    *    *    •    *    •    *    *
     [-]  [-----][-][-----][-][-]  [-]

•すぐにそのコードを実行することができませんでしたし、代わりに保留されましたインターバルの発射を表します。

の間隔が戻ってスケジュールに取得する「キャッチアップ」してみてくださいので。しかし、彼らは互いの上に1をキューに入れないでください：しか間隔ごとに保留中の一回の実行が可能。 （彼らはすべてキューに入れられた場合は、ブラウザが未実行の拡大を続けるリストに残されるだろう！）

.    *    •    •    x    •    •    x
     [------][------][------][------]

X実行しないか、または保留中作られるので、代わりに捨て間隔焼成を表します。

あなたのdoStuff（）関数は、習慣的にそれのために設定されている間隔よりも実行に時間がかかる場合は、

、ブラウザがそれを修理しようとしている100％のCPUを食べるようになる、とあまり反応しなくなることがあります。

  

あなたはどちらを使用して、なぜ？

ん

チェーン・タイムアウトは、ブラウザに自由な時間の保証スロットを提供します。間隔は、ブラウザのUIの可用性を犠牲にし、それはそのスケジュールされた時間にできるだけ近い実行を実行している機能を確保しようとします。

私は連鎖タイムアウトは、ページがロードされながら、場所のすべての時間がかかるだろう継続的なアニメーションのために、より丁寧ありながら、できるだけスムーズになりたかったワンオフのアニメーションのための間隔を検討します。 （30秒ごとか何かを発射するなど些細なアップデータなど）要求の少ない用途のためには、安全のいずれかを使用することができます。

ブラウザの互換性の面では、setTimeoutメソッドはするsetIntervalに先行していますが、今日会うすべてのブラウザは両方をサポートしています。多くの年の最後の落伍者は、Windows Mobile搭載<6.5でIEのモバイルでしたが、うまくいけば、それはあまりにも私たちの後ろになりました。

setInterval()

setInterval() 時間間隔に基づくコードを実行する方法には、ネイティブ能力を繰り返し指定されたスクリプトの時間間隔できます。べきである ない 入れ子にコールバック関数によるスクリプトを作っループで ループによるデフォルト.ることができま焼には間隔ない限り呼び出す clearInterval().

したい場合はループコードのアニメーションやクロックチップ、oleドラッグドロップ、その利用 setInterval().

function doStuff() {
    alert("run your code here when time interval is reached");
}
var myTimer = setInterval(doStuff, 5000);

setTimeout()

setTimeout() 時間に基づくコードを実行する実行のスクリプトのみ 一時 の時間間隔できます。ま ない を繰り返しない限り、ギヤでループのスクリプトによる入れ子の setTimeout() オブジェクト内の機能です。場合を対象ループくじの焼成での間隔のない限り呼び出す clearTimeout().

function doStuff() {
    alert("run your code here when time interval is reached");
}
var myTimer = setTimeout(doStuff, 5000);

したい場合はもう一時間後、一定期間、その利用 setTimeout().ることがでのみ実行時の指定された間隔できます。

のsetIntervalは、それが簡単にあなたのコードの将来の実行をキャンセルすることができます。あなたがsetTimeoutメソッドを使用している場合、あなたは後でそれをキャンセルしたい場合は、タイマIDを追跡する必要があります。

var timerId = null;
function myTimeoutFunction()
{
    doStuff();
    timerId = setTimeout(myTimeoutFunction, 1000);
}

myTimeoutFunction();

// later on...
clearTimeout(timerId);

対

function myTimeoutFunction()
{
    doStuff();
}

myTimeoutFunction();
var timerId = setInterval(myTimeoutFunction, 1000);

// later on...
clearInterval(timerId);
あなたはタイムアウトをキャンセルしたい場合は、

私は使いやすいsetTimeout方法を見つけます：

function myTimeoutFunction() {
   doStuff();
   if (stillrunning) {
      setTimeout(myTimeoutFunction, 1000);
   }
}

myTimeoutFunction();
何かが機能に間違って行くならば、

また、それだけで初めてエラーで繰り返し、代わりのエラーを毎秒の繰り返し停止します。

非常に差がその目的である。

setInterval()
   -> executes a function, over and over again, at specified time intervals  

setTimeout()
   -> executes a function, once, after waiting a specified number of milliseconds

それはそれと同じくらい簡単です。

より複雑な詳細はこちら http://javascript.info/tutorial/settimeout-setintervalする

を実行するとき、一部の機能の中setInterval、作業に時間がかかりまタイムアウト→するとブラウザが固着しました。

-E.g.) doStuff() 間1500sec.を行い: setInterval(doStuff,1000);
1)ブラウザの実行 doStuff() 間1.5秒を実行する
2)～1秒ようとする行 doStuff() ます。が前 doStuff() はいまだに実行->なブラウザを追加するのは、キュー(走行後の最初のです。
3,4,..)同一のキューの実行のための次の反復が doStuff() 前進め...
その結果、ブラウザが滞っております。

これを防ぐために行動するのが最善だと思いますの走行 setTimeout内setTimeout見習setInterval.
正タイムアウト間setTimeout電話を使用でき 自己の是正に代わるJavaScriptのsetInterval ます。

私はのsetTimeoutを使用します。

setTimeoutは一度メソッドを呼び出します。

どうやら違いは、のsetIntervalはrepeatdlyそれを呼び出すされます。

ここで違いを説明する良い記事です：チュートリアル： setTimeoutメソッドとJavaScriptのタイマーとのsetIntervalする

私は、関数の時間消費はインターバル期間よりも大きいときに何が起こるか興味があったので、

私は、setInterval(func, milisec)の簡単なテストを行いました。

setInterval意志の一般のスケジュール次の繰り返しだけで、以前の反復の開始ののの後の機能がまだ進行中でない限り、の。その場合、関数が終了するまで、setIntervalは、お待ちしております。すぐにそれが起こるように、関数はすぐに再び発射される - 何も（それは時間なしの条件であることと同じように機能を超えた）スケジュールに従って次の反復を待っているはありません。並列反復が実行されているとは状況もありません。

私はクロームのV23でこれをテストしてみました。私はそれがすべての近代的なブラウザ間で決定論的な実装であると思います。

window.setInterval(function(start) {
    console.log('fired: ' + (new Date().getTime() - start));
    wait();
  }, 1000, new Date().getTime());

コンソール出力：

fired: 1000    + ~2500 ajax call -.
fired: 3522    <------------------'
fired: 6032
fired: 8540
fired: 11048

wait機能は、ヘルパーを遮断するだけのスレッドです - 正確に、サーバ側での処理のを2500ミリ秒をとる同期AJAX呼び出します：

function wait() {
    $.ajax({
        url: "...",
        async: false
    });
}

あなたのコードは、異なる実行intevalsを持つことになり、そして、オンラインゲームなどのいくつかのプロジェクトでそれが受け入れられないのです。まず、あなたが何をすべきか、同じintevalsを使用してコードを動作させるために、あなたはこれに「myTimeoutFunction」を変更する必要があります：

function myTimeoutFunction()
{
    setTimeout(myTimeoutFunction, 1000);
    doStuff();
}
myTimeoutFunction()

この変更の後、それは等しくなります。

function myTimeoutFunction()
{
    doStuff();
}
myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);
JSは、シングルスレッドであるため、

しかし、あなたはまだ、ない安定した結果を持っています。 JSのスレッドが何かで忙しいになる場合今のところ、あなたのコールバック関数を実行することができなくなり、実行が2-3ミリ秒のために延期されます。あなたは、毎秒60回の実行を持っている、とあなたがランダム1-3秒の遅延を持つたびに、それは（1分後には7200ミリ秒遅れの周りになります）絶対に受け入れられないだろう、と私はこのようなものを使用するようにアドバイスすることができます

    function Timer(clb, timeout) {
        this.clb = clb;
        this.timeout = timeout;
        this.stopTimeout = null;
        this.precision = -1;
    }

    Timer.prototype.start = function() {
        var me = this;
        var now = new Date();
        if(me.precision === -1) {
            me.precision = now.getTime();
        }
        me.stopTimeout = setTimeout(function(){
            me.start()
        }, me.precision - now.getTime() + me.timeout);
        me.precision += me.timeout;
        me.clb();
    };

    Timer.prototype.stop = function() {
        clearTimeout(this.stopTimeout);
        this.precision = -1;
    };

    function myTimeoutFunction()
    {
        doStuff();
    }

    var timer = new Timer(myTimeoutFunction, 1000);
    timer.start();

このコードでは、安定した実行期間を保証します。でもスレッドが忙しくなると、あなたのコードは1005 mseconds後に実行されますが、次回はそれが995ミリ秒のタイムアウトを持つことになり、結果が安定します。

少し異なるそれを見て：のsetIntervalコードは、すべての与えられた間隔で実行されることを保証する（すなわち1000ミリ秒、またはどのくらいのユーザーが指定）のsetTimeoutは、それがコードを実行し、それは「待つ」という時間を設定しています。それは、コードを実行するために余分なミリ秒かかるので、それはこのように1000ミリ秒とする合算し、setTimeoutメソッドは不正確回（1000ミリ秒以上）で再び実行されます。

例えば、タイマー/カウントダウンをsetTimeoutを用いて行われていない

、彼らはそれを遅延させないと、コードが正確な所定の間隔で実行を保証するために、のsetIntervalで行われます。

のsetIntervalやタイムアウトがトリガされる前に、つまり、あなたが実行をキャンセルするために使用できるタイマーIDを返したsetTimeout両方。あなたをキャンセルするには、次のようにてclearIntervalまたはてclearTimeoutのいずれかを呼び出します：

var timeoutId = setTimeout(someFunction, 1000);
clearTimeout(timeoutId);
var intervalId = setInterval(someFunction, 1000),
clearInterval(intervalId);

あなたがページを残したり、ブラウザウィンドウを閉じたときにも、タイムアウトが自動的にキャンセルされます。

私はちょうど学んだとして

さて、setTimeoutメソッドは、ある状況で優れています。私はいつも、私は半分以上の時間バックグラウンドで実行するために残っているのsetIntervalを使用します。私はそのタブに切り替えた場合、（コードが使用された）スライドショーは、非常に急速に変化する代わりに、それは持つべき5秒毎のました。 setTimeoutとその状況が完全に不可能であるので、私はより多くのそれをテストとして、それが実際に再び起こるん、それは、ブラウザのせいだかどうかは、重要ではありません。

あなたは、以下のJavaScriptを実行したときに自分でbobinceの解答を検証したり、この JSFiddleする 

<div id="timeout"></div>
<div id="interval"></div>

var timeout = 0;
var interval = 0;

function doTimeout(){
    $('#timeout').html(timeout);
    timeout++;
    setTimeout(doTimeout, 1);
}

function doInterval(){
    $('#interval').html(interval);
    interval++;
}

$(function(){
    doTimeout();
    doInterval();
    setInterval(doInterval, 1);
});

差がコンソールに明らかである。

ここに画像の説明を入力します

ただ、すでに言われているものに追加することなく、コードのsetTimeoutをバージョンも機能からそれを停止しますMaximum call stack sizeに到達します。再帰関数はそうで停止するために何の基本ケースが存在しないので、あなたはそれが永遠にを実行することはできません。の

私はSetIntervalとSetTimeoutが異なっていると思います。 SetIntervalしばらくを設定された時間に応じてブロックを実行し、SetTimeout一旦コードのブロックを実行します。

タイムアウトカウントダウン秒後にコードのこれらのセットを試してみてください。

setInterval(function(e){
    alert('Ugbana Kelvin');
}, 2000);

、次にしてみてください。

setTimeout(function(e){
    alert('Ugbana Kelvin');
}, 2000);

あなたはあなた自身のための違いを見ることができます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top