JavascriptはsetIntervalを超過して値をデクリメントし＆クリアしますか？

Question

私は時間の経過とともにオーディオ要素の音量をフェードインしようとしています。

以下は私が嘲笑したjavascriptです。したがって、シナリオは、ボタンをクリックすると、この関数を実行します。

音量は時間の経過とともに-0.1で減少します。ボリュームが0のときは、間隔をクリアします...関数は実行されますが、間隔はクリアされません。何が間違っていますか？

var setVolume = function(){ 
    var volume = 1; 
    var fadeVolume = setInterval(function(){ 
     volume -= 0.1; 
     audio[0].volume = volume; 
     console.log(volume); 
    }, 100); 
    if(volume === 0) { 
     clearInterval(fadeVolume); 
    } 
} 

ありがとうございます。

Answer 1

それは、障害の浮動小数点数の表現（とも他の回答で述べたようにclearIntervalを使用した場合）です。浮動小数点数の同等性はしばしば問題であり、このような状況では、浮動小数点数を助けることができれば、浮動小数点数を使用するのが最善の方法です。

> x = 1 
1 
> x -= 0.1 
0.9 
> x -= 0.1 
0.8 
> x -= 0.1 
0.7000000000000001 

代わりに整数を使用することをおすすめします。このよう

：あなたの現在のコードでは、* *あなたは間隔をクリアしているとき：あなたはこの質問に答えるとhttps://jsfiddle.net/6wfk0tgj/

var volume = 100; 
var fadeVolume = setInterval(function(){ 
    volume -= 10; 
    // If audio really needs to be a float then you could do: 
    audio[0].volume = volume/100; 
    console.log(volume); 
    if(volume === 0) { 
     clearInterval(fadeVolume); 
    } 
}, 100); 

Answer 2

あなたは間隔コールバック内てclearInterval関数を呼び出す必要があります。

var setVolume = function(){ 
    var volume = 1; 
    var fadeVolume = setInterval(function(){ 
     volume -= 0.1; 
     audio[0].volume = volume; 
     console.log(volume); 
     if(volume === 0) { 
      clearInterval(fadeVolume); 
     } 
    }, 100); 

}