为什么添加新的 jQuery 函数会阻止现有函数的执行？

Question

我正在努力确定为什么添加新的 jQuery 单击函数会阻止我现有的 AJAX 调用正常工作（注意：我已经仔细检查并隔离了添加新函数的原因）。

这种情况的上下文是，我有一个页面，它向用户提供一个应用题，对用户的响应进行计时，然后使用 AJAX 调用来处理用户的答案并显示其他建议的答案。此功能全部有效。但是，当我调整代码以使计时器在用户单击开始按钮之后（在页面加载时计时器开始之前）才会启动时，AJAX 代码停止工作。

我的问题是：为什么 AJAX 调用可以与原始 jQuery 计时器一起使用，但不能与调整后的 jQuery 计时器代码一起使用。

任何见解将不胜感激！

这是原始的计时器 jQuery：

    var count = 0;
    var interval = setInterval(function(){ 
    $('#timer').html(count + ' secs.');
        count++;
    },1000);

这是新的计时器 jQuery，添加了点击功能：

$('#start_answer').click(function(){
    var count = 0;
    var interval = setInterval(function(){ 
        $('#timer').html(count + ' secs.');
        count++;
        },1000);
    $('.cluster_a').addClass("answer_highlight");
    $('.cluster_q').addClass("question_unhighlight");

});

这是 AJAX 调用：

        $('#process_structure').live('click', function () {
        var postData = $('#inputs_structure').serializeArray();
        postData.push({name: 'count', value: count});
        $('#testing').fadeOut('slow');
        $.ajax ({
            type: "POST",
            url: "structure_process.php",
            data: $.param(postData),
            success: function(text){
                $('#testing').fadeIn('500', function(){
                    $('#testing').html(text);
                })
            }
        });

        $(this).parent().html('<a class="right_next" href="/structure.php">Do another</a>');

        clearInterval(interval);
        return false;
    })

它应用于的 HTML：

        <div class="problem" id="testing"> <!-- create main problem container -->
        <div class="cluster_q">
            <div class="title"><?php if($switch){; echo $_SESSION['title']; ?></div>
                <div class="summary"><?php echo $_SESSION['problem']; ?></div>
                    <div class="extras"><?php echo 'Categories: ' . $_SESSION['category'][0] . ' | Source: <a href="' . $_SESSION['source'][1] . '">' . $_SESSION['source'][0] . '</a>'; ?> <!--<a href="http://www.engadget.com/2011/01/06/gm-invests-5-million-in-powermat-says-wireless-charging-headed/">Engadget blog post</a>--></div>
            <button id="start_answer">start</button>
        </div>
                    <form method="POST" id="inputs_structure"> 
                        <div class="cluster_a" id="tree_container">
                            <?php acceptTreeTest($num); ?>
                        </div>

                        <table class="basic" id="new_bucket">
                            <tr>
                                <td class="td_alt"></td>
                                <td class="td_alt"><a href="#" id="add_bucket" class="extras">add bucket</a></td>
                                <td class="td_alt"></td>
                            </tr>
                        </table>
                    </form>
        <?php } else{; ?>
            <p>Whoa! You've done every single structure question. Nice work!</p>
            <a href="/structure.php">Start going through them again</a>
            </div> <!-- extra /div close to close the divs if the page goes through the else statement -->
            </div> <!-- extra /div close to close the divs if the page goes through the else statement -->
        <?php }; ?>      
    </div> <!-- closes problem container -->

Answer 1

您需要在点击处理程序之外声明 interval 和 count 变量，以便它们位于 push 和 clearInterval( ) 代码中的调用。

var count = 0;
var interval;
$('#start_answer').click(function(){
    interval = setInterval(function(){
        $('#timer').html(count + ' secs.'); 
        // rest of code


$('#process_structure').live('click', function () {
    var postData = $('#inputs_structure').serializeArray();
    postData.push({name: 'count', value: count});
    ...
    clearInterval(interval);

Answer 2

很难准确说出您要做什么，但在第二个代码片段中，间隔位于闭包中，并且无法从外部访问。在第一个示例中，看起来间隔是全局的。我猜当您在 AJAX 调用中调用clearInterval 时，没有可用的间隔变量。