javascript - 暂停执行

Question

我的页面上有一个计时器，当计时器到期时，它会提示警报框，现在的问题是，即使在按下警报框中的“确定”按钮后，它也会一次又一次地调用。其实我想把它重定向到另一个页面。 window.location=""; 可以工作，但它会进入负计时器。

HTML 代码:

<div>Registration closes in <span id="time">00:03</span> minutes</div>

JavaScript 代码:

<script   src="https://code.jquery.com/jquery-3.1.0.js"   integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="   crossorigin="anonymous"></script>  

    <script type="text/javascript">
        function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.text(minutes + ":" + seconds);

        if (--timer < 0) {
            alert("I am an alert box!");
            //window.location = "http://www.google.com";
        }
    }, 1000);
}

jQuery(function ($) {
    var fiveMinutes = 0.5 * 5,
        display = $('#time');
    startTimer(fiveMinutes, display);
});
    </script>

Answer 1

您必须保存间隔的引用，以便在需要时停止它。看看这个:

var interval;
function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    interval = setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.text(minutes + ":" + seconds);

        if (--timer < 0) {
            alert("I am an alert box!");
            clearInterval(interval);
        }
    }, 1000);
}

$(function ($) {
    var fiveMinutes = 0.5 * 5,
        display = $('#time');
    startTimer(fiveMinutes, display);
});
 

<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>  
<div id="time" />

但它更喜欢使用这个代码

setTimeout(function(){ startTimer(fiveMinutes, display); }, 1000);

然后进入startTimer函数，根据你的逻辑，再次调用setTimeout。

希望有帮助!