Проблемы 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;
    }
  }

РЕДАКТИРОВАТЬ: вот полная версия моего кода

    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", тета возвращает NaN. Я не понимаю, почему это должно быть так. Есть идеи, где я иду не так?

Answer 1

Спасибо @gillesc за полезный комментарий - #stop-stort находился внутри #navigation, что вызвало запуск onNavButtonClick одновременно с carouselNext, что привело к

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

потерпеть неудачу и превратить тэту в NaN.