【jQuery】setIntervalがうまく動作しないときに確認したいこと

jQueryって便利ですよね。実はjQueryを使って数字のカウントアップとカウントダウンを行う関数を作っていたのですが、数字が収束しないなどおかしな挙動を示していました。

原因

その原因はなんと、clearTimeoutまで到達できていなかったという超初歩的なミスでした。間違えたときのソースコードを記入します。

function countUp(start_val, end_val, target){
  var elm = $(target);
  var interval = parseInt((end_val - start_val) / 6);
  var count_speed = 150; 
  var this_count = start_val;
  
  var count_timer = setInterval(function(){
    elm.text(this_count);
    this_count += interval;
    if (this_count >= end_val) {
      elm.text(end_val);
      clearInterval();
    }
  }, count_speed);
}

まずいのは3行目です。この関数では、this_countがend_valと同じか、または超えたときにタイマーを止めるようにしてあるのですが、intervalが0を取ってしまうと、this_countがずっと更新されずに無限ループしてしまいます。

よく気をつければわかるバグですが、この解決に1日も費やしてしまいました。start_valとend_valが同じ値のときは関数を使わないように呼び出し元で気を使う必要がありますね。

このコードの解説についてはこちらで紹介しています！