javascript 单击时清除setInterval

Posted 2021-05-03

https://stackoverflow.com/questions/10442452/setinterval-and-clearinterval-when-cleared-does-not-animate-automatically

HTML

<div class="form-check">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" id="day_choice" name="selected_time">Day
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" id="night_choice" name="selected_time">Night
  </label>
</div>




// JS
jQuery(document).ready( function() {
    // Start Timer and Date
    var IntID = runTimer(); // get ID for this Timer, later to be used when 
                            // disabling this timer
    dayOnClick() ;
    nightOnClick() ;

  // FUNCTIONS 
  function getStyleSheet() {
    ...
    // code that runs every 5 seconds in runTimer() 
  }



    // INIT TIMER
    function runTimer() {
        var i = setInterval( getStylesheet, 5000 );
        return i;
    }

    // STOP TIMER WITH REFERENCE ON INIT TIMER ABOVE
    function stopTimer() {
        clearInterval( IntID );
    }
    
    // DAY OPTION SELECTED
    function dayOnClick() {
        jQuery("#day_choice").click(function () {
            console.log( 'DAY CHOICE SELECTED' );
            // stop or pause the timer
            stopTimer() ;
            console.log('dayOnClick() - Timer Stopped') ;
            // disable/remove night.css and load day.css
            setDayStyleSheet() ;       
        });
    }

    // NIGHT OPTION SELECTED
    function nightOnClick() {
        jQuery("#night_choice").click(function () {
            console.log( 'NIGHT CHOICE SELECTED' );
            // stop or pause the timer
            stopTimer() ;
            console.log('nightOnClick() - Timer Stopped') ;
            // disable/remove day.css and load night.css
            setNightStyleSheet() ;
        });
    }
    
    
} ) ; //  END Document Ready