1

我正在努力确定为什么添加新的 jQuery click 函数会阻止我现有的 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 -->
4

2 回答 2

0

您需要在单击处理程序之外声明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);
于 2011-06-17T17:25:09.763 回答
0

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

于 2011-06-17T17:26:10.207 回答