计时器:clearInterval()不起作用(js)

时间:2014-12-08 15:51:55

标签: javascript

我不明白这个错误。

有我的简单代码:

var refreshInterval;

function refreshAuto()
{
    if($("#refresh-select").val() == "off")
    {
        clearInterval(refreshInterval);
        console.log("I'm here !");
    }
    else
    {
        refreshInterval = setInterval("console.log('bip')", $("#refresh-select").val());
    }
}

我选择带有下拉列表的计时器。 代码工作除外(计时器的参数是好的,我已经测试过)我清除间隔的部分。它没有清除Interval。当我选择“关闭”时,控制台告诉我“我在这里”,但不会停止“双向”。有什么想法吗?

感谢。

3 个答案:

答案 0 :(得分:2)

如果多次按下开启按钮,可能会发生这种情况。原因是即使新间隔的引用替换了第一个间隔,也不会清除第一个间隔。

试试这个,

var refreshInterval;

function refreshAuto()
{
    clearInterval(refreshInterval);
    if($("#refresh-select").val() == "off")
    {
        console.log("I'm here !");
    }
    else
    {
        refreshInterval = setInterval("console.log('bip')", $("#refresh-select").val());
    }
}

答案 1 :(得分:1)

解决此问题的一种方法是,只有在您没有运行计时器时才安排计时器:

var refreshInterval;

function refreshAuto() {
    var refreshSelection = $("#refresh-select").val();

    if(refreshSelection === "off") {
        clearInterval(refreshInterval);
        refreshInterval = null;
        console.log("I'm here !");
    }
    else if (!refreshInterval) {
        refreshInterval = setInterval(function() { console.log('bip'); }, 
                                      refreshSelection);
    }
}

答案 2 :(得分:0)

问题

每次创建一个间隔时,它都会创建一个超时,你不会因为它被命名而覆盖最后一个。如果你将console.log输出一个不同的值,你会看到它。

var refreshInterval;

function refreshAuto()
{
    if($("#refresh-select").val() == "off")
    {
        clearInterval(refreshInterval);
        console.log("I'm here !");
    }
    else
    {
        var interval = $("#refresh-select").val()
        refreshInterval = setInterval( function() { console.log('bip', interval ); } , interval );
    }
}

现在,当您运行它时,您的日志将显示当您以1秒和5秒延迟更改间隔两次时的问题。

bip 1000
bip 1000
bip 1000
bip 1000
bip 1000
bip 5000
bip 1000
bip 1000
bip 1000
bip 1000
bip 1000
bip 5000

一个解决方案

要解决此问题,您可以在每次设置时清除间隔。



    var refreshInterval;

    function refreshAuto() {
      if (refreshInterval) window.clearInterval(refreshInterval);
      var val = $("#refresh-select").val();
      if (val !== "off") {
        refreshInterval = setInterval(function() {
          console.log('bip', val);
        }, parseFloat(val));
      }
    }

    $("#refresh-select").on("change", refreshAuto).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="refresh-select">
  <option value="off">Off</option>
  <option value="1000">1</option>
  <option value="5000">5</option>
  <option value="30000">30</option>
  <option value="60000">60
    <option>
</select>
&#13;
&#13;
&#13;