Javascript SetInterval和clearInterval问题

我在这方面遇到了问题，我的代码是（简化的）：

编辑：这是我的代码的完整版本

    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);
        }

    });

var CAROUSEL_持续时间=5000；
var html=''；
$（文档）.ready（函数（）{
$.getJSON（“/static/js/users.json”），函数（数据）{
$。每个（数据、函数（索引、学生）{
html+=''；
html+=''+student.level+'of the Month'；
html+=''+student.firstname+''+student.lastname+''；
html+=''+student.class+'

'；
html+=''；
});
$（'.students'）.html（html）；
$（'.students'）。循环({
外汇：“淡出”，
暂停：“1”，
上一页：“#上一页”，
下一个：“#下一个”，
速度：'500'，
超时：10000
});
//捕获JSON读取错误
}).失败（功能（d、文本状态、错误）{
错误（“getJSON失败，状态：+textStatus+”，错误：+error）
});
$（“.my btn”）。单击（函数（）{
$（“
”）.text（“单击”）.prependTo（“.posts”）；
});
var carousel=document.getElementById（'carousel'）；
var navButtons=document.querySelectorAll（“#导航按钮”）；
var panelCount=carousel.children.length；
var transformProp=modernizer.前缀为（'transform'）；
varθ=0；
$（“#下一步”）。在（'click'，function（）上{
θ+=（360/板数）*-1；
旋转木马样式[transformProp]=“translateZ（-288px）rotateY（“+theta+”deg）”；
});
carouselNext=函数（）{
θ+=（360/板数）*-1；
旋转木马样式[transformProp]=“translateZ（-288px）rotateY（“+theta+”deg）”；
}
var carouselInterval=window.setInterval（carouselNext，CAROUSEL_DURATION）；
var=true；
//停止转盘旋转
$（“#停止-开始”）。单击（函数（）{
如果（旋转）{
净空间隔（旋转传送带）；
旋转=假；
}否则{
carouselInterval=设置间隔（carouselNext，CAROUSEL_持续时间）；
旋转=真；
}
})
//单击旋转木马导航按钮
onNavButtonClick=函数（事件）{
var increment=parseInt（event.target.getAttribute（'data-increment'）；
θ+=（360/面板计数）*增量*-1；
旋转木马样式[transformProp]=“translateZ（-288px）rotateY（“+theta+”deg）”；
};
对于（变量i=0；i<2；i++）{
navButtons[i]。addEventListener（'click'，onNavButtonClick，false）；
}
});

当我加载页面时，θ每秒都在滴答作响，正如预期的那样

当我点击“stopstart”按钮时，θ停止滴答作响，正如预期的那样

---

但是，当我再次单击“stopstart”时，θ返回NaN。我不明白为什么会这样。知道我哪里出错了吗？

感谢@gillesc的帮助性评论-#stop stort在导航中#导致onNavButtonClick与carouselNext同时被触发，导致

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

---

失败并将θ变为NaN。

什么是

$（“#stopstart”）。单击.function

？它应该是

$（“stopstart”）。单击（函数

您对代码简化得太多了。能否发布足够的代码，以便它实际执行并演示问题？对我来说效果很好。您的问题可能与闭包有关。请给出一个简化程度较低的示例。访问

θ

的代码是否在

文档中。就绪（）

？如果没有，它将不在同一范围内。转盘是否在导航中，可能会触发

onNavButtonClick

，而

var increment=parseInt（event.target.getAttribute（'data-increment'）；

失败，因此变成

NaN

？查看HTML可能会有所帮助

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