JavaScriptでタイムアウトのif文を入れ子にするよりも読みやすいアプローチですか？

Question

私はエクササイズタイマーを作っています。私はReactを使っていますが、私はそれが私の特定の質問にとって重要だとは思わない。

タイマーは毎秒カウントダウンします。複数のセットがあり（各セットは異なる練習です）、すべてのセットがラウンドごとに繰り返されます。

以下のコードは動作しますが、読みにくくなり始めます。私はまた、各セットの後に休憩時間を追加する必要があるので、私が現在の方法を続けていくと、さらに多くのif文が必要になります。

timer() { 
    this.myTimer = setInterval(() => { 
     // When the set time goes down to 0... 
     if (this.state.setTimeRemaining === 0) { 
     // Increment the set number 
     this.setState({currentSet: this.state.currentSet + 1}); 
     // Reset the remaining time 
     this.setState({setTimeRemaining: this.state.setLength + 1}); 
     } 
     // When the last set in the round is passed... 
     if (this.state.currentSet > this.state.noOfSets) { 
     // Reset the set number 
     this.setState({currentSet: 1}); 
     // Increment the round number 
     this.setState({currentRound: this.state.currentRound + 1}); 
     } 
     // If we've finished... 
     if (this.state.currentRound > this.state.noOfRounds) { 
     this.updateProgress('complete'); 
     } 
     // Minus 1 second from the current set time 
     this.setState({setTimeRemaining: this.state.setTimeRemaining - 1}); 
     if (this.state.progress === 'running') { 
     // Update the timer bar's status 
     this.updateTimerBar(); 
     } 
    }, 1000); 
    } 

この状況にはどのような方法が最適ですか？私はswitch文を使うことができますか？私はBabelを使用していますので、最新のJavaScriptメソッド/構文を使用できます。

Answer 1

このソリューションは、ネストを回避します。 Imは、条件が一致したときにブロックを終了するためにリターンを使用します。最後のエラーメッセージは、条件が満たされていないかどうかを示します。

timer() { 
    this.myTimer = setInterval(() => { 

     // Not resting. Not at end of set 
     if (this.state.resting === false && this.state.setTimeRemaining > 0) { 
     // Negative increment set time 
     this.setState({setTimeRemaining: this.state.setTimeRemaining - 1}); 
     return; 
     } 

     // Not resting. At end of set 
     if (this.state.resting === false && this.state.setTimeRemaining === 0) { 
     // Set resting state to true 
     this.setState({resting: true}); 
     return; 
     } 

     // Resting. Not end of rest 
     if (this.state.resting === true && this.state.restTimeRemaining > 0) { 
     // Negative increment rest time 
     this.setState({restTimeRemaining: this.state.restTimeRemaining - 1}); 
     return; 
     } 

     // Resting. At end of rest. Not at last set in round 
     if (this.state.resting === true && this.state.restTimeRemaining === 0 
     && this.state.currentSet < this.state.noOfSets) { 
     this.setState({ 
      currentSet: this.state.currentSet + 1, // Increment the current set no 
      setTimeRemaining: this.state.setLength, // Reset the set time remaining 
      restTimeRemaining: this.state.restLength, // Reset the rest time remaining 
      resting: false       // Turn off resting flag 
     }); 
     return; 
     } 

     // Resting. At end of rest. Reached last set in round. Not last round in session 
     if (this.state.resting === true && this.state.restTimeRemaining === 0 
     && this.state.currentSet === this.state.noOfSets 
     && this.state.currentRound < this.state.noOfRounds) { 
     this.setState({ 
      currentRound: this.state.currentRound + 1, // Increment hte round no 
      currentSet: 1,        // Reset the set no 
      setTimeRemaining: this.state.setLength, // Reset the set time remaining 
      restTimeRemaining: this.state.restLength, // Reset the rest time remaining 
      resting: false        // Turn off resting flag 
     }); 
     return; 
     } 

     // Resting. At end of rest. Reached last set in round. Reached last round in session 
     if (this.state.resting === true && this.state.restTimeRemaining === 0 
     && this.state.currentSet === this.state.noOfSets 
     && this.state.currentRound === this.state.noOfRounds) { 
     this.updateProgress('complete'); // We've finished the session 
     return; 
     } 

     // This console message should never be reached 
     console.error('Timer error - a condition was not returned'); 
    }, 1000); 
    }