ループ処理を一定時間毎にしたい。

質問

お世話になります。

処理１
s = s + 4;
処理２
$("a#sakuin")[0].click();
処理３
$("a#sakuin2")[0].click();

処理１
↓
処理２→処理１の5秒後に実行
↓
処理３→処理２の5秒後に実行

これらを変数sが40になるまでループ処理したいのですがどのようにすればよいでしょうか？
よろしくお願いします。

回答No.6

amanojaku1 · ベストアンサー

>回答No.5　amanojaku1

>>処理毎に別々の秒数にしたい場合はどのようにすればよいでしょうか？

>「setInterval()」から「setTimeout()」に変更されている事に注意して下さい。
>ProcessNextTime変数でターマーの時間をミリ秒で設定しています。

初期値を「ProcessCnt = -1;」にすれば、もっとスマートにできました。

<script type="text/javascript"><!--
s = 0;
// ProcessArrayに配列を代入
ProcessArray = [ // 配列の要素はゼロ・スタートです。
function (){s = s + 4;console.log("処理1：s="+s);}, // 配列の要素[0]に関数を定義
function (){console.log("処理2：");}, // 配列の要素[1]に関数を定義
function (){console.log("処理3：");} // 配列の要素[2]に関数を定義
]
ProcessNextTime = [500, 1000, 2000]; // ミリ秒で指定

ProcessCnt = -1; // 「(ProcessCnt+1)%ProcessArray.length;」はゼロになります。
TimerManager();

function TimerManager(){
ProcessCnt = (ProcessCnt+1)%ProcessArray.length;
ProcessArray[ProcessCnt]();
console.log(ProcessNextTime[ProcessCnt]);
if(s<40){ setTimeout("TimerManager()",ProcessNextTime[ProcessCnt]); } // 次のタイマーを設定。
}
// --></script>

お礼

うまくできました！
ありがとうございました！

回答No.5

amanojaku1

>処理毎に別々の秒数にしたい場合はどのようにすればよいでしょうか？

「setInterval()」から「setTimeout()」に変更されている事に注意して下さい。
ProcessNextTime変数でターマーの時間をミリ秒で設定しています。

<script type="text/javascript"><!--
s = 0;
// ProcessArrayに配列を代入
ProcessArray = [ // 配列の要素はゼロ・スタートです。
function (){s = s + 4;console.log("処理1：s="+s);}, // 配列の要素[0]に関数を定義
function (){console.log("処理2：");}, // 配列の要素[1]に関数を定義
function (){console.log("処理3：");} // 配列の要素[2]に関数を定義
]
ProcessNextTime = [500, 1000, 2000]; // ミリ秒で指定

ProcessCnt = 0;
ProcessArray[0](); // 配列の要素[0]の関数を実行。
setTimeout("TimerManager()",ProcessNextTime[ProcessCnt]);

function TimerManager(){
ProcessCnt = (ProcessCnt+1)%ProcessArray.length;
ProcessArray[ProcessCnt]();
console.log(ProcessNextTime[ProcessCnt]);
if(s<40){ setTimeout("TimerManager()",ProcessNextTime[ProcessCnt]); } // 次のタイマーを設定。
}
// --></script>

回答No.4

amanojaku1

>回答No.3　amanojaku1

簡単に関数内から「ProcessCnt++;」を追い出せました。

<script type="text/javascript"><!--
s = 0;
// ProcessArrayに配列を代入
ProcessArray = [ // 配列の要素はゼロ・スタートです。
function (){s = s + 4;console.log("処理1：s="+s);}, // 配列の要素[0]に関数を定義
function (){console.log("処理2：");}, // 配列の要素[1]に関数を定義
function (){console.log("処理3：");} // 配列の要素[2]に関数を定義
]

ProcessArray[0](); // 配列の要素[0]の関数を実行。
ProcessCnt = 1;

IntervalTimer = set = setInterval(function (){
if(ProcessArray.length<=ProcessCnt){ ProcessCnt = 0; }
ProcessArray[ProcessCnt]();
ProcessCnt++;
if(40<=s){ clearInterval(IntervalTimer); } // タイマーの停止。
}, 1000); // ミリ秒で指定：1秒で実行しています、5秒なら「5000」を指定して下さい。
// --></script>

補足

回答ありがとうございます。
こちらのやり方ですとそれぞれの処理の実行間隔が同じ秒数になりますが、処理毎に別々の秒数にしたい場合はどのようにすればよいでしょうか？

回答No.3

amanojaku1

はい、t_ohtaさんが仰ってるとおりです。
で実際は どうすれば良いのかと言うと

<script type="text/javascript"><!--
ProcessCnt = 0;
s = 0;
// ProcessArrayに配列を代入
ProcessArray = [ // 配列の要素はゼロ・スタートです。
function (){ProcessCnt++;s = s + 4;console.log("処理1：s="+s);}, // 配列の要素[0]に関数を定義
function (){ProcessCnt++;console.log("処理2：");}, // 配列の要素[1]に関数を定義
function (){ProcessCnt++;console.log("処理3：");} // 配列の要素[2]に関数を定義
// 「ProcessCnt++;」は必須です。
]

ProcessArray[0](); // 配列の要素[0]に関数を実行。

IntervalTimer = set = setInterval(function (){
if(ProcessArray.length<=ProcessCnt){ ProcessCnt = 0; }
ProcessArray[ProcessCnt]();
if(40<=s){ clearInterval(IntervalTimer); } // タイマーの停止。
}, 1000); // ミリ秒で指定：1秒で実行しています、5秒なら「5000」を指定して下さい。
// --></script>

回答No.2

t_ohta

setTimeout を使ってやれば順番に実行できるけど、jQueryの ].click() ってクリックイベントが発生した時の処理を定義する関数であって、クリックイベントを起こしてくれる訳じゃありませんよ。

回答No.1

maiko0333

ご参考
http://qiita.com/akyao/items/a718cc78436df68d7e15