javascriptでsetIntervalを使うたびに移動速度が上がってしまう

Question

###前提
前回の質問でdivのboxをjavascriptのみでアニメーション移動させることについて質問しましたが、あれから試行錯誤を重ねて成功しました。

現状としましてはクリックした箇所にboxがイージングアニメーションをしながら移動します。

###発生している問題
一つだけ問題なのが、最初にクリックした時のboxの移動速度と10回ほどクリックした時の移動速度が変わってしまうことです。
クリックしてboxを移動させる度に移動速度が速くなってしまいます。
setIntervalの使い方が間違っているのか、それとも原因が他にあるのか手詰まり状態です。

ご回答どうぞよろしくお願いします。
該当のソースコードをjsfiddleにアップしていますので、ご活用ください。
https://jsfiddle.net/ululami/c29aLprv/

###該当のソースコード

var box = document.getElementById('box');
var clientRect;
//boxのx軸とy軸
var boxX;
var boxY;
//クリックした箇所のx軸とy軸
var clickX = 0;
var clickY = 0;

document.addEventListener('click', function(event){
  clientRect = box.getBoundingClientRect();
  
  boxX = clientRect.left;
  boxY = clientRect.top;
  
  clickX = event.clientX;
  clickY = event.clientY;
  
  setInterval(function(){
    box.style.left = boxX + 'px';
    box.style.top = boxY + 'px';
    
    if(boxX < clickX || boxY < clickY){
      boxX = boxX + (clickX - boxX) / 50;
      boxY = boxY + (clickY - boxY) / 50;
    } else if(boxX 　> clickX || boxY > clickY){
      boxX = boxX - (boxX - clickX) / 50;
      boxY = boxY - (boxY - clickY) / 50; 
    }
  }, 30)
});

<div id="box"></div>

*{
  margin: 0;
  padding: 0;
}

#box{
  width: 50px;
  height: 50px;
  background: red;
  position: relative;
}

Answer 1

どんどん速くなるのはedo_m18さんのおっしゃるとおり、setIntervalを何回も実行しているからですね。止めるには、setIntervalが返すinterval IDを変数に保存しておき、止めたい時にclearIntervalにそのIDを渡します。

var intervalID = setInterval( ... );

// stop the interval
clearInterval(intervalID);

以下は気になった点です。

次のboxの座標を次のように計算していますが、

    if(boxX < clickX || boxY < clickY){
      boxX = boxX + (clickX - boxX) / 50;
      boxY = boxY + (clickY - boxY) / 50;
    } else if(boxX 　> clickX || boxY > clickY){
      boxX = boxX - (boxX - clickX) / 50;
      boxY = boxY - (boxY - clickY) / 50; 
    }

どちらの場合も同じ結果になるので、場合分けする必要はないと思います。

    boxX = boxX + (clickX - boxX) / 50;
    boxY = boxY + (clickY - boxY) / 50;

質問の趣旨から外れてしまいますが、setIntervalではなくwindow.requestAnimationFrame()を使うと滑らかなアニメーションができます。

DEMO

var box = document.getElementById('box');
var clientRect = box.getBoundingClientRect();
var boxX = clientRect.left;
var boxY = clientRect.top;

var clickX = 0;
var clickY = 0;

document.addEventListener('click', function(event){
  clickX = event.clientX;
  clickY = event.clientY;
});

window.requestAnimationFrame(step);

var lastTime;

function step(timestamp) {
  if (!lastTime) lastTime = timestamp;
  var deltaTime = timestamp - lastTime;	// 前フレームからの経過時間
  move(deltaTime);
  window.requestAnimationFrame(step);
  lastTime = timestamp;
}

function move(delta) {
  boxX += (clickX - boxX) / 200 * delta;
  boxY += (clickY - boxY) / 200 * delta;
  box.style.left = boxX + 'px';
  box.style.top = boxY + 'px';
}

Comments

[owl]

返信遅れて申し訳ありません。
requestAnimationFrameを使うことを考えていなかったので、
これを使用したらスムーズにアニメーションし、大変満足しています。
本当にありがとうございます。

Answer 2

多分、クリックするたびにsetIntervalで呼ばれる関数が重複して呼ばれるからじゃないかと思います。

クリックごとに前のsetIntervalを止めるなどして処理が重複しないようにしたら速度が変化することがなくなると思います。

Comments

[owl]

返信遅れて申し訳ありません。
まさにsetIntervalの部分クリックするたびに重複していることが原因でした。
大変勉強になりました。
本当にありがとうございます。

Answer 3

setTimeoutを使うという手もあるでしょう。目的地にたどり着いていなければ再帰的に呼び出すという方法です。

が、たどり着いているかを判断する上で、もっと重大な問題が存在しています。

結論としては今回のプログラムとは全く関係無いのですが、わかりやすい例として、
アキレスと亀のパラドックスをご存知でしょうか?

詳しくはここでは述べませんが、アキレスがいくら速くても、微小時間で見ていくとアキレスは移動する亀には追いつけないというものです。

実は質問者様のプログラムは似たような状況になっているんです。
「残りの距離の1/2だけ進む」というのは良いアイデアだったと思いますが、
これは目的地には極限を取ると着きますが、実際には限りなく近づくだけでたどり着けないんです。

これはconsole.log("boxX : "+boxX+" clickX : "+clickX);のようなコードで確認していただけると思います。

ですから人の目では到着しているように見えても簡単な記述では止めることができません。setTimeoutに変えるだけでも確かに処理は重ならなくなるはずですが、(ほぼ)到着しても処理は止まりません。これは意図した動作では無いはずです。

ですからMath.round()等の関数を使用して区切りのいい所で止まるようにしましょう。

以下コードです。1つめは大体の位置が同じなら何もせず、違っていれば再帰処理させるというものです。(1つめの方はkaramarimo様の回答を参考に場合分けは消しました。)

var box = document.getElementById('box');
var clientRect;
//boxのx軸とy軸
var boxX;
var boxY;
//クリックした箇所のx軸とy軸
var clickX = 0;
var clickY = 0;
// 終了判定用
var preX = 0;
var preY = 0;

document.addEventListener('click', function(event){
  clientRect = box.getBoundingClientRect();

  boxX = clientRect.left;
  boxY = clientRect.top;

  clickX = event.clientX;
  clickY = event.clientY;

  var move = function(){
    box.style.left = boxX + 'px';
    box.style.top = boxY + 'px';

    preX = Math.round(boxX*100);
    preY = Math.round(boxY*100);

    boxX += (clickX - boxX) / 50;
    boxY += (clickY - boxY) / 50;

    // 小数第3位を四捨五入して小数第2位で比較
    if(Math.round(boxX*100)!=preX || Math.round(boxY*100)!=preY) setTimeout(move,30);
    //console.log("boxX : "+boxX+" clickX : "+clickX);
    //console.log("boxY : "+boxY+" clickY : "+clickY);
  };
  setTimeout(move,30);
});

jsfiddle

または比較部分で丸めるのもありです。

// 省略
      if(Math.round(boxX*10) < clickX*10 || Math.round(boxY*10) < clickY*10){
        boxX = boxX + (clickX - boxX) / 50;
        boxY = boxY + (clickY - boxY) / 50;
        setTimeout(move,30);
      } else if(Math.round(boxX*10) > clickX*10 || Math.round(boxY*10) > clickY*10){
        boxX = boxX - (boxX - clickX) / 50;
        boxY = boxY - (boxY - clickY) / 50;
        setTimeout(move,30);
      }
      //console.log("boxX : "+boxX+" clickX : "+clickX);
      //console.log("boxY : "+boxY+" clickY : "+clickY);
    };
    setTimeout(move,30);
// 省略

(長文失礼しました。m(_ _)m)

Comments

[owl]

返信遅れて申し訳ありません。
とても詳しく回答していただき大変勉強になりました。
特に到達地点に限りなく近づくかゴールに到達できない部分が大変納得しました。
本当にありがとうございます。