setInterval 函数在重新启动 setinterval 时将值递增两次

Question

有一个我正在尝试运行创建弹出窗口的代码。弹出窗口打开后，将初始化一个计数器，该计数器每秒递增一次并使用 setInterval。但是，当我取消进程（clearInterval 以及它）并重新打开弹出窗口时，计数器初始化但每秒递增两次。您可以在下面找到我的 jquery 脚本以供参考。请让我知道为什么我会观察到这种奇怪的行为。请原谅脏代码，如果我的 jquery 做法有误，请随时指出。我对前端开发相当陌生，因此这可能是一个微不足道的问题，但我似乎无法在网上找到任何原因。期待任何输入。

// Semicolon (;) to ensure closing of earlier scripting

// Encapsulation
// $ is assigned to jQuery

;
(function($) {
                var counter2 = 0;
                var counter3 = 60;
                var counter4 = 60;
                var interval2;
                var timeNow;
                var canFlag = 0;
    // DOM Ready
    $(function() {
        var checker = '';
        var popClicked = 0;
        var timeout = 0;
        // Binding a click event
        // From jQuery v.1.7.0 use .on() instead of .bind()
        $('#my-button').bind('click', function(e) {
            checker = $('#log').text();
            popClicked = 1;


            if (checker==="somecondition") {
                //alert(checker);
                // Prevents the default action to be triggered. 
                e.preventDefault();

                // Triggering bPopup when click event is fired
                $('.element_to_pop_up').bPopup();
            }
            else {
                alert('Oops.. error message');
            }


        });



        $('#popNext').click(function() {
            currTopic = randTopic();
            $('#newTopic').html(currTopic);
            $('#pg1pop').hide();
            $('#pg2pop').show();
            var counter = 10;
            var counterFlag = 0;

            $('#pg2Ref').click(function() {
                currTopic = randTopic();
                $('#newTopic').html(currTopic);
                counter = 10;
            });
            $('.b-modal, .b-close').click(function() {
                canProcess();
                $('#pg2pop').hide();

                $('#timeout').hide();

                $('#pg1pop').show();

            });
            $('#pg2Cont').click(function() {

                counter2 = 0;
                counter3 = 60;
                counter4 = 60;

                counterFlag = 1;
                $('#pg2pop').hide();
                $('#pg3pop').show();


                //alert("counter 1-4: "+counter+"-"+counter2+"-"+counter3+"-"+counter4+"-"+"cflag - "+counterFlag+"-"+"timeout flag"+timeout);

                interval2 = setInterval(function() {

                        counter2++;



                    if (counter2 == 146) {
                        // Display a login box
                        timeNow = (new Date).getTime();
                        $('#pg3con').html('Well done!<br>Process is over. Please wait, we are processing your data. ');
                        clearInterval(interval2);
                        stopProcess(currTopic);
                    }

                    else if (counter2 == 1) {
                        $('#pg3con').html('Your topic is:<br>"' + currTopic + '"<br>& you have <span id="sec2" style="font-size:120%;">60</span> seconds to start!<br><br><button id="skip" style="width: auto; margin:auto">Skip</button>');

                        $('#skip').click(function() {
                            counter2 = 53;
                        });
                    }
                    else if (counter2 > 1 && counter2 <= 53) {
                        counter4--;
                        $('#sec2').html(counter4);
                    }
                    else if (counter2 == 54) {
                        $('#pg3con').html('Relax! ');

                    }
                    else if (counter2 == 58) {
                        $('#pg3con').html('Your time starts in 3..');

                    }
                    else if (counter2 == 59) {
                        $('#pg3con').html('Your time starts in 2..');
                    }
                    else if (counter2 == 60) {
                        $('#pg3con').html('Your time starts in 1..');
                    }
                    else if (counter2 == 61 && timeout == 0) {
                        $('#pg3con').html('<div class="w40" class="tCenter"><p>Your topic:<p><br><p>' + currTopic + '</p></div><div class="w60"><div>You have<br></div><div id="sec" style="font-size:600%;">60</div><div> Secs</div></div><br><br><button class="contentBox contentBoxOrange" id="continue" style="width: auto; margin:auto">Continue</button>');
                        $('#popupLog').show();
                        $('#continue').click(function() {
                            counter2 = 121;
                        });


                        startProcess();
                    }
                    else if (counter2 > 61 && counter2 <= 121) {
                        counter3--;
                        $('#sec').html(counter3);
                    }
                    else if (counter2 > 121 && counter2 < 146) {
                        $('#pg3con').html('Some text:<br>"Some text"<br><br><button id="finish" style="width: auto; margin:auto">Finish</button>');
                         $('#finish').click(function() {
                            counter2 = 145;
                        });
                    }
                    $('.b-modal, .b-close').click(function() {
                    canProcess();
                    canFlag =1;
                    clearInterval(interval2);
                    $('#pg3con').html('<img src="path/to/images/ajax-loader.gif">');

                    $('#pg3pop').hide();
                    $('#pg1pop').show();

                });
                }, 1000);




            });
            var interval = setInterval(function() {
                if(counter > 0){
                    counter--;
                }
                $('#secs').html(counter + " seconds");
                if (counter === 0 && counterFlag === 0) {
                    // Display a login box
                    timeout = 1;
counterFlag = 1;
                    clearInterval(interval);

                    $('#pg2pop').hide();
                    $('#popupLog').hide();
                    $('#timeout').show();


                }
            }, 1000);

        });



    });

})(jQuery);

可重现：总是；可能的原因：缺少 knowledge/logical 错误

编辑：如果取消两次，则计数器递增 3，依此类推。

Answer 1

我没有复制或测试你的整个脚本（如评论中所述，我们不是来调试的），但我的建议是在你开始之前清除你的间隔，而不是之后。所以请尝试以下操作：

clearInterval(interval);
interval = setInterval(function() {
    // do whatever here
}, time);

通过这种方式，您可以确保正在进行的任何间隔都不会再消失。

Answer 2

也许了解 setinterval 的作用是件好事。

所以每个例子：

var myInterval = setInterval(function() {
      //some code here
}

变量 'myInterval' 的值不是您所期望的函数。然而，该值是一个整数。

因此，通过在您的代码中再次设置间隔，该整数从（每个示例）1 变为 2。如果您运行在再次运行之前没有清除间隔，您唯一要做的就是清除最新的间隔。第一个还没通关

还要小心运行间隔，在你知道之前你的脚本中已经有几个运行ning。

setInterval 函数在重新启动 setinterval 时将值递增两次

setInterval function increments values twice on restarting setinterval

javascript

jquery

setinterval