JavaScriptでsetInterval呼び出しを停止する


1398

setInterval(fname, 10000);JavaScriptで10秒ごとに関数を呼び出すために使用しています。何かのイベントでそれを呼び出すのをやめることは可能ですか?

ユーザーが繰り返し行われるデータの更新を停止できるようにしたい。

回答:


2160

setInterval()に渡すことができる間隔IDを返しますclearInterval()

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

setInterval()およびのドキュメントを参照してくださいclearInterval()


42
「clearInterval()」で停止した後、どのようにそれを再開できますか?再起動しようとすると、2倍のsetIntervalが実行されます。
ダン

8
私もSetInterval(MyFunction、4000);を使用するたびに それはどんどん速くなり、毎回2倍速くなります:(どうすればsetintervalを再開できますか??
Alireza Masali

14
SetInterval()は、渡される速度を変更しません。SetInterval()を呼び出すたびに、実行中の処理が高速化する場合は、同時に実行されている複数のタイマーがあり、新しい質問を開く必要があります。
EpicVoyage 2013

29
あなたが本当にそれを止めていることを確認してください。変数のスコープのため、呼び出す適切なIDがない可能性がありますclearIntervalwindow.refreshIntervalIdローカル変数の代わりに使用しましたが、うまくいきます!
-osa

2
関連する要素にsetIntervalハンドルを関連付け始めました(該当する場合)。$('foo').data('interval', setInterval(fn, 100));それから、それをクリアするために、clearInterval($('foo').data('interval'));jQuery以外の方法もあると確信しています。
マイケル-クレイシャーキーはどこですか2017

105

の戻り値をsetInterval変数に設定すると、を使用clearIntervalしてそれを停止できます。

var myTimer = setInterval(...);
clearInterval(myTimer);

これとジョンの答えの違いはわかりません
Bobtroopo

51

新しい変数を設定して、実行するたびに++(1カウントアップ)ずつ増加させることができます。次に、条件ステートメントを使用して終了します。

var intervalId = null;
var varCounter = 0;
var varName = function(){
     if(varCounter <= 10) {
          varCounter++;
          /* your code goes here */
     } else {
          clearInterval(intervalId);
     }
};

$(document).ready(function(){
     intervalId = setInterval(varName, 10000);
});

私はそれが役に立って、それが正しいことを望みます。


3
これが機能することを知って驚いたclearInterval(varName);。私が期待されるclearInterval関数名を渡されたときに、ではない仕事に私はそれがインターバルIDが必要と思いました。これは、名前付き関数がある場合にのみ機能すると思います。これは、匿名関数をそれ自体の内部の変数として渡すことができないためです。
Patrick M

31
実際には機能しないと思います。カウンターの制限により、コードの実行は停止しますが、インターバルはvarName()を起動し続けます。clearInterval()の後(else句の内側)のログを記録すると、永久に書き込まれることがわかります。
Rafael Oliveira

5
うまくいかないことへの賛成投票が多すぎて、時々私はSOの人々を理解できません:P
Stranded Kid

2
$(document).ready(function(){ });jQueryなので、機能しません。これは少なくとも言及されるべきでした。
paddotk 2015年

4
@OMGrant、機能しない例に加えてvarName、名前のない関数を格納するという名前の変数があります-wha ?? あなたはこの答えを変更または削除する必要があります、IMHO。
Dean Radcliffe

13

上記の回答は、setIntervalがハンドルを返す方法と、このハンドルを使用してインターバルタイマーをキャンセルする方法をすでに説明しています。

アーキテクチャに関するいくつかの考慮事項:

「スコープなし」の変数は使用しないでください。最も安全な方法は、DOMオブジェクトの属性を使用することです。最も簡単な場所は「ドキュメント」です。復習を開始/停止ボタンで開始する場合は、ボタン自体を使用できます。

<a onclick="start(this);">Start</a>

<script>
function start(d){
    if (d.interval){
        clearInterval(d.interval);
        d.innerHTML='Start';
    } else {
        d.interval=setInterval(function(){
          //refresh here
        },10000);
        d.innerHTML='Stop';
    }
}
</script>

関数はボタンクリックハンドラー内で定義されるため、再度定義する必要はありません。もう一度ボタンをクリックすると、タイマーを再開できます。


1
装着するよりdocumentも装着する方が良いのはwindow
icktoofay 2014年

1
補正。document.bodyと言うつもりです。私のコード例では、ボタン自体を効果的に使用しています。ボタンのIDはありませんが、「this」ポインタは関数の「d」パラメータにバインドされています。関数も存在するため、スコープとして「ウィンドウ」を使用するのは危険です。たとえば、「関数test(){}」はwindow.testを介してアクセスできます。これは、省略形であるため、スコープをまったく使用しないのと同じです。お役に立てれば。
Schien

1
「スコープなし」の変数を失わないでください->「スコープなし」を使用しないでください編集したはずですが、変更は6文字未満であり、エラーは混乱を招きます。
Leif Neland 2014

2
そのためにDOMは必要ありません。地球規模の汚染を回避するために私たちだけにIIFEを使用します。
OnurYıldırım16年

1
再度機能させるには、innerhtml = 'start'の後に 'd.interval = undefined'を追加する必要があります。そのようなことが一度だけうまくいくからです。
jocmtb

11

回答済み...しかし、さまざまな間隔で複数のタスクをサポートする、再利用可能な機能付きのタイマーが必要な場合は、(ノードおよびブラウザー用の)私のTaskTimerを使用できます。

// Timer with 1000ms (1 second) base interval resolution.
const timer = new TaskTimer(1000);

// Add task(s) based on tick intervals.
timer.add({
    id: 'job1',         // unique id of the task
    tickInterval: 5,    // run every 5 ticks (5 x interval = 5000 ms)
    totalRuns: 10,      // run 10 times only. (omit for unlimited times)
    callback(task) {
        // code to be executed on each run
        console.log(task.name + ' task has run ' + task.currentRuns + ' times.');
        // stop the timer anytime you like
        if (someCondition()) timer.stop();
        // or simply remove this task if you have others
        if (someCondition()) timer.remove(task.id);
    }
});

// Start the timer
timer.start();

あなたの場合、ユーザーがクリックしてデータ更新を妨害すると、あなたもtimer.pause()それから電話することができますtimer.resume()再度有効にする必要がある場合は、できます。

詳細はこちら


6

clearInterval()メソッドを使用すると、setInterval()メソッドで設定されたタイマーをクリアできます。

setIntervalは常にID値を返します。この値をclearInterval()で渡してタイマーを停止できます。タイマーの例は30から始まり、0になると停止します。

  let time = 30;
  const timeValue = setInterval((interval) => {
  time = this.time - 1;
  if (time <= 0) {
    clearInterval(timeValue);
  }
}, 1000);

5

@cnu、

コンソールブラウザー(F12)を確認する前にコードを実行すると、間隔を停止できます。:P

ソースの例を確認してください:

var trigger = setInterval(function() { 
  if (document.getElementById('sandroalvares') != null) {
    document.write('<div id="sandroalvares" style="background: yellow; width:200px;">SandroAlvares</div>');
    clearInterval(trigger);
    console.log('Success');
  } else {
    console.log('Trigger!!');
  }
}, 1000);
<div id="sandroalvares" style="background: gold; width:200px;">Author</div>


3

変数を宣言してsetInterval(...)から返された値を割り当て、割り当てられた変数をclearInterval();に渡します。

例えば

var timer, intervalInSec = 2;

timer = setInterval(func, intervalInSec*1000, 30 ); // third parameter is argument to called function 'func'

function func(param){
   console.log(param);
}

// 上記で宣言されたタイマーにアクセスした場所はすべて、clearIntervalを呼び出します

$('.htmlelement').click( function(){  // any event you want

       clearInterval(timer);// Stops or does the work
});

1
var keepGoing = true;
setInterval(function () {
     if (keepGoing) {
        //DO YOUR STUFF HERE            
        console.log(i);
     }
     //YOU CAN CHANGE 'keepGoing' HERE
  }, 500);

イベントリスナーを追加して間隔を停止することもできます。たとえば、IDが「stop-interval」のボタンを言います。

$('buuton#stop-interval').click(function(){
   keepGoing = false;
});

HTML:

<button id="stop-interval">Stop Interval</button>

注:間隔は引き続き実行されますが、何も起こりません。


2
これは実際にはパフォーマンスに戻ります。バックグラウンドタブの場合、タイマーと間隔がバックグラウンドタブで
調整

1

これは、10秒後にタイマーを停止するためにclearInterval()メソッドを使用した方法です。

function startCountDown() {
  var countdownNumberEl = document.getElementById('countdown-number');
  var countdown = 10;
  const interval = setInterval(() => {
    countdown = --countdown <= 0 ? 10 : countdown;
    countdownNumberEl.textContent = countdown;
    if (countdown == 1) {
      clearInterval(interval);
    }
  }, 1000)
}
<head>
  <body>
    <button id="countdown-number" onclick="startCountDown();">Show Time </button>
  </body>
</head>


1

setTimeOutを使用して、一定時間後にインターバルを停止します。

var interVal = setInterval(function(){console.log("Running")  }, 1000);
 setTimeout(function (argument) {
    clearInterval(interVal);
 },10000);

0

次のコードが役立つと思います:

var refreshIntervalId = setInterval(fname, 10000);

clearInterval(refreshIntervalId);

あなたはコードを100%正しかった...それで...問題は何ですか?またはそれはチュートリアルです...


-3

より単純なアプローチを使用しないのはなぜですか?クラスを追加してください!

間隔を何もしないように指示するクラスを追加するだけです。例:ホバー時。

var i = 0;
this.setInterval(function() {
  if(!$('#counter').hasClass('pauseInterval')) { //only run if it hasn't got this class 'pauseInterval'
    console.log('Counting...');
    $('#counter').html(i++); //just for explaining and showing
  } else {
    console.log('Stopped counting');
  }
}, 500);

/* In this example, I'm adding a class on mouseover and remove it again on mouseleave. You can of course do pretty much whatever you like */
$('#counter').hover(function() { //mouse enter
    $(this).addClass('pauseInterval');
  },function() { //mouse leave
    $(this).removeClass('pauseInterval');
  }
);

/* Other example */
$('#pauseInterval').click(function() {
  $('#counter').toggleClass('pauseInterval');
});
body {
  background-color: #eee;
  font-family: Calibri, Arial, sans-serif;
}
#counter {
  width: 50%;
  background: #ddd;
  border: 2px solid #009afd;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  transition: .3s;
  margin: 0 auto;
}
#counter.pauseInterval {
  border-color: red;  
}
<!-- you'll need jQuery for this. If you really want a vanilla version, ask -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p id="counter">&nbsp;</p>
<button id="pauseInterval">Pause</button></p>

私はこの高速で簡単な方法をずっと探していたので、できるだけ多くの人に紹介するためにいくつかのバージョンを投稿しています。


17
私には本当に簡単に思えない...私はまた、何もしない関数の呼び出しを保持する代わりに、間隔を削除する方がきれいだと思います。
Romain Braun

同意しません。this.setInterval(function() { if(!$('#counter').hasClass('pauseInterval')) { //do something } }, 500);コードに必要なのはこれだけです。さらに、チェックは最初に行うことなので、ホバーされているときは非常に軽量です。これが目的です。一時的に関数を一時停止します。無期限に終了したい場合:もちろん間隔を削除します。
Aart den Braber

これはポーリングに相当し、通常は推奨されません。(おそらく)役に立たないチェックを行うために、CPUを低電力状態から起動します。また、この例では、フィードバックを即時から0〜500ミリ秒に遅延させます。
チャーリー

私が2年前にコードを書いたとしても、私は完全にあなたに同意しません。OPが要求したため、カウンターはとにかくそこになければなりません。たとえば、これを使用してボタンを押した後にカウンターを停止する場合、これは次善の解決策ですが、ホバリング時の一時停止のために、これは利用可能な最も簡単な解決策の1つです。
Aart den Braber
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.