调用clearInterval后如何重新启用setInterval？

Question

这是我的 javascript：

<script type="text/javascript">
var timer;

$(document).ready(function () {
    timer = setInterval(updatetimerdisplay, 1000);

    $('.countdown').change(function () {
        timer = setInterval(updatetimerdisplay, 1000);
    });

    function updatetimerdisplay() {
        $(".auctiondiv .auctiondivleftcontainer .countdown").each(function () {
            var newValue = parseInt($(this).text(), 10) - 1;
            $(this).text(newValue);

            if (newValue >= 9) {
                $(this).css("color", "");
                $(this).css("color", "#4682b4");
            }

            if (newValue == 8) {
                $(this).css("color", "");
                $(this).css("color", "#f3982e");
            }

            if (newValue == 5) {
                $(this).css("color", "");
                $(this).css("color", "Red");
            }

            if (newValue <= 1) {
                //$(this).parent().fadeOut();
                clearInterval(timer);
            }
        });
    }
});

var updateauctionstimer = setInterval(function () {
    $("#refreshauctionlink").click();
}, 2000);

function updateauctions(response) {
    var data = $.parseJSON(response);

    $(data).each(function () {
        var divId = "#" + this.i;
        if ($(divId + " .auctiondivrightcontainer .latestbidder").text() != this.b) {
            $(divId + " .auctiondivrightcontainer .latestbidder").fadeOut().fadeIn();
            $(divId + " .auctiondivrightcontainer .auctionprice .actualauctionprice").fadeOut().fadeIn();
            $(divId + " .auctiondivleftcontainer .countdown").fadeOut().fadeIn();
        }

        $(divId + " .auctiondivrightcontainer .latestbidder").html(this.b);
        $(divId + " .auctiondivrightcontainer .auctionprice .actualauctionprice").html(this.p);

        if ($(divId + " .auctiondivleftcontainer .countdown").text() < this.t) {
            $(divId + " .auctiondivleftcontainer .countdown").html(this.t);
        }
    });
}
</script>

基本上，如果任何 .countdown 元素的文本发生变化，我想重新打开计时器。

由于我用来更新该值的 AJAX 调用，文本将会更改。

目前，计时器不会重新启用，并且在 .Countdown 的值更改后倒计时会冻结。我认为当元素的文本发生变化时，change() 事件会被触发。这是正确的吗？

我有什么明显的错误吗？

Answer 1

您的代码包含循环和条件：

function updatetimerdisplay() {
    $(".auctiondiv .auctiondivleftcontainer .countdown").each(function () {
    ...
        if (newValue <= 1) {
            //$(this).parent().fadeOut();
            clearInterval(timer);
        }
        ...
    }
}

这些元素之一的值很可能满足条件 newValue <= 1。在这种情况下，计时器将停止。即使您更改输入字段的内容，计时器也会在运行后立即停止。

如果您必须支持多个计时器，请使用计时器钱包（vartimers = {};timers.time1=... 或 vartimers = [];timers[0] = 。 ..）。如果您只需要支持几个超时，您甚至可以使用变量（var timer1=...,timer2=...,timer3=...;）。

Answer 2

您试图在元素存在之前绑定更改事件。将该代码放入 ready 事件处理程序中：

$(document).ready(function () {
  timer = setInterval(updatetimerdisplay, 1000);

  $('.countdown').change(function () {
    timer = setInterval(updatetimerdisplay, 1000);
  });

});

当计时器关闭时，您可能还希望将 timer 变量设置为可识别的值（例如 null )，这样您就可以在启动计时器之前检查该值，以防止启动多个计时器。