js setIntervalとsetTimeout

setInterval()とsetTimeout()

setInterval(処理, 時間)	指定時間ごとに処理実行（無限に繰り返す）
setTimeout(処理, 時間)	指定時間後に処理実行（n秒後に処理実行）

setInterval(処理, 時間)

setInterval(function(){
  ～ 処理Ａ ～
}, 1000);

「処理Ａ」が終わらなくても「1000」ミリ秒後に再度、「処理Ａ」を実行。
→同じ処理が同時に複数実行される可能性あり→メモリ不足になる可能性あり。

setTimeout(処理, 時間)

setTimeout(function(){
  ～ 処理Ａ ～
}, 1000);

「処理Ａ」が終わったら「1000」ミリ秒後に再度、「処理Ａ」を実行。

setTimeout()

「setInterval()」は落ちる可能性があるので、使いたくないので、setTimeout()のサンプル。

nミリ秒後に実行

var n = 1000;
function loop(){
  ～ 処理 ～
}
setTimeout(loop, n);

▼別の記述

var n = 1000;
setTimeout(function(){
  ～ 処理 ～
}, n);

nミリ秒ごとに実行

var n = 1000;
function loop(){
  ～ 処理 ～
  
  setTimeout(loop, n);
}
loop();

nミリ秒ごとに実行→途中で止める（clearTimeout()）

var n = 1000;
var i = 0;
var idTimer;
function loop(){
  ～ 処理 ～
  
  i++;
  if ( i < 10 ) {
    // 10未満は再実行
    idTimer = setTimeout(loop, n);
  }
  else {
    // 10以上は終了
    clearTimeout(idTimer);
  }
}
loop();

開始ボタンで処理を繰り返し、停止ボタンで処理を止めたい

var idTimer = null;
var startProc = function() {
  ～ 処理 ～
  
  idTimer = setTimeOut(startProc, 1000);
}

$(〇〇〇).on('click', 開始ボタン, function(){
  // 開始ボタンが複数回クリックされてもOKなように。
  if ( idTimer == null ) {
    startProc();
  }
});

$(〇〇〇).on('click', 停止ボタン, function(){
  // 開始ボタンが押されていないのに停止ボタンが押されてもOKなように。
  if ( idTimer != null ) {
    clearTimeout(idTimer);
    idTimer = null; // また開始ボタンを押してもOKなように、クリアしておく
  }
});

ウィンドウのリサイズ時に何かしたい

「$(window).resize()」でウィンドウのリサイズのときに何かすることが出来るんだけど、そのまま使うとリサイズ中のときも処理が走る。
そのため「リサイズイベントが走った後、一定時間リサイズされていない」を「リサイズを完了した」と考える。

詳細は忘れた・・・なぜ、これでリサイズ完了時に実行されるのだろう？

var timer = false;
$(window).resize(function() {
  if (timer !== false) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    // windowのリサイズ完了の処理
  }, 200);
});