SetInterval и clearInterval вопросы

Question

У меня возникли проблемы с этим, мой код (упрощенно):

$(document).ready(function() { 

    var theta = 0; 

    carouselNext = function() { 
    theta += 1; 
    } 

    var carouselInterval = window.setInterval(carouselNext, 1000); 
    var spinning = true; 

    $("#stopstart").click.function() { 
    if (spinning) { 
     clearInterval(carouselInterval); 
     spinning = false; 
    } else { 
     carouselInterval = setInterval(carouselNext, CAROUSEL_DURATION); 
     spinning = true; 
    } 
    } 

EDIT: здесь полная версия моего кода

var CAROUSEL_DURATION = 5000; 
    var html = ''; 
    $(document).ready(function(){ 
     $.getJSON("/static/js/users.json", function(data){ 
      $.each(data, function(index, student){ 
       html += '<div class="student">'; 

       html += '<h2>' + student.level + ' of the Month</h2>'; 

       html += '<h4>' + student.firstname + ' ' + student.lastname + '</h4>'; 

       html += '<p>' + student.class + '</p></br>'; 

       html += '</div>'; 
      }); 
      $('.students').html(html); 

      $('.students').cycle({ 
       fx: 'fade', 
       pause: '1', 
       prev: '#prev', 
       next: '#next', 
       speed: '500', 
       timeout: 10000 
      }); 
     // catch JSON reading error 
     }).fail(function(d, textStatus, error) { 
      console.error("getJSON failed, status: " + textStatus + ", error: "+error) 
     }); 
     $(".my-btn").click(function() { 
      $('<li>').text("click").prependTo('.posts'); 

     }); 

     var carousel = document.getElementById('carousel'); 
     var navButtons = document.querySelectorAll('#navigation button'); 
     var panelCount = carousel.children.length; 
     var transformProp = Modernizr.prefixed('transform'); 
     var theta = 0; 

     $("#next").on('click', function() { 
      theta += (360/panelCount) * -1; 
      carousel.style[ transformProp ] = 'translateZ(-288px) rotateY(' + theta + 'deg)'; 
     }); 


     carouselNext = function() { 
      theta += (360/panelCount) * -1; 
      carousel.style[ transformProp ] = 'translateZ(-288px) rotateY(' + theta + 'deg)'; 
     } 

     var carouselInterval = window.setInterval(carouselNext, CAROUSEL_DURATION); 
     var spinning = true; 

     // stop carousel spinning 
     $("#stop-start").click(function() { 
      if (spinning) { 
       clearInterval(carouselInterval); 
       spinning = false; 
      } else { 
       carouselInterval = setInterval(carouselNext, CAROUSEL_DURATION); 
       spinning = true; 
      } 
     }) 

     // clicking on carousel navigation buttons 
     onNavButtonClick = function(event) { 
      var increment = parseInt(event.target.getAttribute('data-increment')); 
      theta += (360/panelCount) * increment * -1; 
      carousel.style[ transformProp ] = 'translateZ(-288px) rotateY(' + theta + 'deg)'; 
     }; 

     for (var i=0; i < 2; i++) { 
      navButtons[i].addEventListener('click', onNavButtonClick, false); 
     } 

    }); 

Когда я загрузить на странице, тета тикает 1 раз в секунду, как и ожидалось ...

Когда я нажимаю кнопку «stopstart», тета останавливается, как ожидается ...

Однако, когда я снова нажимаю «stopstart», theta возвращает NaN. Я не понимаю, почему так должно быть. Любые идеи, в которых я ошибаюсь?

Answer 1

Благодаря @gillesc за их полезные комментарии - # стоп-Stort был внутри #navigation вызвавшего onNavButtonClick выстрелить в то же время, как carouselNext, вызывая

increment = parseInt(event.target.getAttribute('data-increment')); 

на провал и превращения тэта стать NaN ,