javascriptで大きな数値の計算をするとおかしな値が出ることを解決したい

Question

前提・実現したいこと

viewでstartボタンを押すとlocalstorageに時間が保存されtimer関数が呼ばれます。setTimeoutで一秒ごとにtimer関数を呼び続けるのでconsole.log(elapsed);によりconsoleには1,2,3…と表示され続けます。

その経過時間から経過年数を出すために経過秒数から31536000(一年の秒数）を割ることによって値を出します。

解決したいことはstartボタンを押しconsole.log(year);の出力を確認するとstartボタンを押してから最初に3,6,9と3の倍数が表示され9の後には1,1,1,2,2,2,3,3,3…と数値がで続けます。本来ならstartボタンを押すと最初から0,0,0,0と表示されなければいけないにも関わらずおかしな値が出てしまうことを解決したいです。

timer.js

function timer() {

	now = new Date();
	
	// 経過時間（秒）
	elapsed = parseInt((now.getTime() - localStorage.getItem("time")) / 1000);	
    console.log(elapsed);		
	year = parseInt(elapsed / 31536000);
    console.log(year);

    if (localStorage.getItem("time")) {
      var id = setTimeout("repetition()", 1000);
    } 

}

試したこと

数値(31536000)が大きすぎて正確な値が出なかったのかなと考えたので31536で割るとうまく計算されstartボタンを押して以来0がずっと出力されました。

またyearの箇所をいきなり秒数で書くのではなく一年の秒数の計算式でyear = parseInt(elapsed / 365 * 24 * 60 * 60);のように書き直すと次は大きな値（１０００以上）が不規則に出力されました。

原因が全くわからなかったのでもし解決策があればご教示願いたいです。

Answer 1

今回のバグの原因は、引数が数値であるにも関わらず parseInt を使ったことです。

parseInt は引数に文字列を受け取ります。
また、JavaScript では、0.000000031709791983764586 のようなゼロに近い値の場合、3.1709791983764586e-8 のような指数表記で文字列化されます。
よって、例えば parseInt(1 / 31536000) は、parseInt(3.1709791983764586e-8) になって、parseInt("3.1709791983764586e-8") になって、最終的に 3 となります。

parseInt ではなく、Math.floor などを使うことでバグを解消できます。

Comments

[2KOH]

ちなみに、
parseInt(elapsed / 365 * 24 * 60 * 60)
が大きな値になるのは、
parseInt((elapsed / 365) * 24 * 60 * 60)
のように計算されるからです。こちらは算数の問題です。

[Homaresan]

parseIntの引数に数値を入れていた事が原因みたいですね！
Math.floorを使ったら問題解決出来ました！
ありがとうございました！