それぞれのsetInterval処理を交互に実行したい

Question

以下にふたつのsetIntervalがあります。

//処理A
var hoge1 = 0
setInterval(function(){
$('#sample1').html(hoge1 + 1);
hoge1 ^= 1;
},2000);
		
//処理B
var hoge2 = 0
setInterval(function(){
$('#samle2').html(hoge2 + 1);
hoge2 ^= 1;
},2000);

それぞれ、上を処理A、下を処理Bとします。
これらを、処理Aが終わったら処理Bへ移行。
その後は再び処理Aへといったようにループさせたいです。

要は同時処理を避けたくて、それぞれどちらか一方が動き、
どちらかが止まっているという状態にしたいです。

ご教授いただけましたら幸いです。
よろしくお願いいたします。

Answer 1

もし処理1,処理2が非常に重く、適切な実行間隔が見積もれない状態で処理が被ることを避けたい場合は、関数の末尾から次の関数を直接呼び出したり、setTimeoutを利用する手もあるかも知れません。

var cnt = 0;
var fnc1 = function(){
  console.log('fnc1');
  cnt++;
  if(cnt < 5) setTimeout(fnc2,1000);
}
var fnc2 = function(){
  console.log('fnc2');
  setTimeout(fnc1,1000);
}
fnc1();

Comments

[southern_flavor]

ご回答ありがとうございます。
数字１、２の繰り返しだけではなく、例えば別の数字で５、６など他の数字でも動けていいですね。
また、質問内容とは別のことを言って、申し訳ないですが、数字１、２の繰り返しとは別件で、処理Aで数字１、２、３と出て　次に処理Bで数字１、２、３と出し、ループするにはどうしたらよろしいでしょうか。。

Answer 2

一つのタイマーにして、フラグで処理を分けるのが手っ取り早そうです。

Comments

[southern_flavor]

ご回答ありがとうございます。
その方法も思いついたのですが、なかなかできなかったです。。

Answer 3

ちょっと、長くなりますが、複数の関数を順に実行するサンプルです。

//タスクA
function A(){
  console.log("A");
  return true;
}

//タスクB
function B(){
  console.log("B");
  return true;
}

//タスクC
function C(){
  console.log("C");
  return true;
}

//タスク登録配列
var taskArray_ = [];
//実行中タスク配列番号
var nowTaskNo_ = 0;

//タスク登録関数
function appendTask(cb, to){
  //単に配列に、関数と、タイムアウト値を格納するだけ
  taskArray_.push({callback:cb, timeout:to});
}

//タスク実行関数
function doTask(){

  //対象タスク取得
  var task = taskArray_[nowTaskNo_];
  //実行中タスク番号インクリメント
  if(++nowTaskNo_ == taskArray_.length)nowTaskNo_ = 0;

  //タスク実行
  if(!task.callback())return; //呼び出した関数でfalseが戻ったら終了。

  //次のタスクへ
  setTimeout(doTask, task.timeout);

  //
  task = null; //一応メモリリーク対策、最近は書かなくても大丈夫かも？
}

//
//実行部分
//

//タスクを実際に登録
appendTask(A, 2000); //A()実行で2秒待ち
appendTask(B, 1000); //B()実行で1秒待ち
appendTask(C, 1500); //C()実行で1.5秒待ち

//タスクを実行
doTask();

A()
B()
C()
みたいなタスク（関数）は、いくつでも増やせます。
実行したいタスク（関数）を、
appendTask(A, 2000); //関数名、タイムアウト(msec)
という形で、登録して、
doTask();
で実行開始で、延々とグルグルタスク実行します。
そのままだと終われないので、一応A()とかB()とかの関数で、falseで戻ると、doTaskを抜けるようにしてみました(このサンプルにはありませんが、)。

ご要望のものとあうかどうか？は不明ですが、これなら、関数の数などに制限されません。
prototype化したほうが格好いいですが、基本ということで。

Comments

[southern_flavor]

詳細にご説明いただき、ありがとうございます。
関数化したうえに、複数にも対応できる点はすごいですね。
console.logに私が書いた

var hoge1 = 0
$('#sample1').html(hoge1 + 1);
hoge1 ^= 1;
をいれてみたのですが、0と1しか変化がなかったのですが、これを0、1、2、0、1、2みたいにカウントアップさせるにはどこを変えたらよろしいでしょうか。

Answer 4

基本

// setIntervalで
var hoge1 = 0;
var hoge2 = 0;
a();

function a() {
	var i = setInterval(function(){
		clearInterval(i);
		$('#sample1').html(hoge1 + 1);
		hoge1 ^= 1;
		b();
	},2000);
}

function b() {
	var i = setInterval(function(){
		clearInterval(i);
		$('#sample2').html(hoge2 + 1);
		hoge2 ^= 1;
		a();
	},2000);
}

// setTimeoutで
var hoge1 = 0;
var hoge2 = 0;
a();

function a() {
	setTimeout(function(){
		$('#sample1').html(hoge1 + 1);
		hoge1 ^= 1;
		b();
	},2000);
}

function b() {
	setTimeout(function(){
		$('#sample2').html(hoge2 + 1);
		hoge2 ^= 1;
		a();
	},2000);
}

// setInterval１つで
var hoge1 = 0;
var hoge2 = 0;
setInterval(a, 2000);

function a() {
	if(hoge1 == hoge2) {
		$('#sample1').html(hoge1 + 1);
		hoge1 ^= 1;
	} else {
		$('#sample2').html(hoge2 + 1);
		hoge2 ^= 1;
	}
}

// setTimeout１つで
var hoge1 = 0;
var hoge2 = 0;
a();

function a() {
	if(hoge1 == hoge2) {
		$('#sample1').html(hoge1 + 1);
		hoge1 ^= 1;
	} else {
		$('#sample2').html(hoge2 + 1);
		hoge2 ^= 1;
	}
	setTimeout(a, 2000);
}

Comments

[southern_flavor]

ご回答についてまとめてくださってありがとうございます。
もうひとつ、つまずいてしまったことがありまして、それについて調べております。

[kagi_shippo]

また、setInterval()とclearInterval()をセットで使うと、一見setTimeout()と同じことができているように見えますが、setInterval()とsetTimeout()は、引数に指定する間隔(時間)の意味が違うので、とくに間隔が短く処理が重い場合には、使い分けが必要です。

[think49]

> setInterval()とsetTimeout()は、引数に指定する間隔(時間)の意味が違うので、
差し支えなければ、両者の違いを教えていただければ幸いです。
setInterval と clearInterval の組み合わせは setTimeout とほぼ同じ挙動をすると認識していました。
あえて違いをあげるなら clearInterval 前に例外エラーが発生すると延々とエラーを投げ続けますが、そういう意味でしょうか。

[kagi_shippo]

詳細な違いは、「setInterval setTimeout 違い」等で調べてください。

簡単に説明すると
setInterval()は、前の処理の開始と、次の処理の開始の間隔、
setTimeout()は、前の処理の終了と、次の処理の開始の間隔の指定です。

つまり、
setInterval()に、1回に5秒かかる処理と1秒の間隔を指定すると、10回目の処理の開始は、10秒後、
setTimeout()に、1回に5秒かかる処理と1秒の間隔を指定すると、10回目の処理の開始は、55秒後になります。

また、処理にかかる時間は一定とは限らないので、
setInterval()は、一定間隔での開始が保証されるかわりに、処理が無限に重複する可能性があり、
setTimeout()は、処理が重複する可能性がないかわりに、一定間隔で開始されるとは限りません。

[think49]

なるほど、仰る事が理解できました。
ただ、一つだけ誤りがあって「setInterval()に、1回に5秒かかる処理と1秒の間隔を指定すると、10回目の処理の開始は、10秒後」は間違いで46秒後(1 + 5 * 9 === 46)でした。
setInterval と setTimeout のタイマー処理は重複しないので、「処理時間: 5秒、処理間隔: 1秒」の前提なら setInterval の2回目以降のインターバルは事実上「0」になりますね。
https://jsfiddle.net/j0uqosm7/

[kagi_shippo]

ご指摘ありがとうございます。
間違っていました。
重複しないですよね。

「つまり」からあとの部分について、以下の通り訂正させていただきます。

つまり、
setInterval()に、1回に1秒かかる処理と1秒の間隔を指定すると、10回目の処理の開始は、10秒後、
setTimeout()に、1回に1秒かかる処理と1秒の間隔を指定すると、10回目の処理の開始は、19秒後になります。

また、処理にかかる時間は一定とは限らないので、
setInterval()は、指定した間隔より処理の時間が短ければ、一定間隔での開始が保証されますが、
setTimeout()は、指定した間隔より処理の時間が短くても、一定間隔で開始されるとは限りません。

Answer 5

処理A,Bをそれぞれ関数化してみてはどうでしょうか。

function A(){
	console.log('A');
	setInterval(function(){
		B();
	},2000);
}
function B(){
	console.log('B');
	setInterval(function(){
		A();
	},2000);
}
A();

Comments

[think49]

実行するとタイマーが増殖してしまいますね。
setIntervalからsetTimeoutに変更すれば期待通りに動作すると思われます。

[sekitaka_1214]

失礼しました。タイムアウトが正しいてますね

[southern_flavor]

関数化するやり方について、setTimeoutにすれば動くようですね。
ご提案ありがとうございます。

Answer 6

setInterval の第三引数を使ってはどうでしょうか(IE10- は Polyfill で)。

<p id="sample1">sample1</p>
<p id="sample2">sample2</p>
<script>
'use strict';
setInterval(function (parameter) {
  var list = parameter.list,
      i = parameter.i,
      data = list[i];

  parameter.i = ++i % list.length;
  console.log('#'+ data.id, jQuery('#'+ data.id)[0]);
  jQuery('#'+ data.id).text(data.hoge + 1);
  data.hoge ^= 1;
}, 2000, {list: [{hoge: 0, id: 'sample1'}, {hoge: 0, id: 'sample2'}], i: 0});
</script>

Re: southern_flavor さん

Comments

[southern_flavor]

ご回答ありがとうございます。
これはいいですね。
短いコードで済みそうです。
ただ、実行結果をみると１、２といい感じに繰り返してはいるのですが、
例えば５、６の繰り返しや５、６、７の繰り返しでやろうとしたらうまく動きませんでした。

[southern_flavor]

質問内容と別のことで申し訳ないのですが、上記のことについて、もしお分りでしたら、宜しくお願いいたします。

[think49]

こういうことでしょうか。
https://gist.github.com/think49/f4efb81f2042e75b2f24

[southern_flavor]

何度もありがとうございます。
こういうのもできるんですね。

実際にhtmlのページで表示確認するにはどこを変えたら良いでしょうか。

[think49]

親記事の data.hoge ^= 1; を書き換えて下さい。