如何正确使用setInterval和clearInterval在两个不同的函数之间切换？

对于练习，我试图显示一个从0到9递增的数字，然后从9到0递减，并无限重复。

我到目前为止的代码似乎很接近，但在第二次迭代时，我的2个函数countUp和countDown的setInterval调用似乎彼此冲突，因为显示的数字不按照预期顺序计数。 ..然后浏览器崩溃。

这里是我的代码：

如何正确使用setInterval和clearInterval在两个不同的函数之间切换？

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Algorithm Test</title> 
    </head> 

    <body onload = "onloadFunctions();"> 
     <script type = "text/javascript"> 
      function onloadFunctions() 
      { 
       countUp(); 
       setInterval(countUp, 200); 
      } 

      var count = 0; 
      function countUp() 
      { 
       document.getElementById("here").innerHTML = count; 
       count++; 

       if(count == 10) 
       { 
        clearInterval(this); 
        countDown(); 
        setInterval(countDown, 200); 
       } 
      } 
      function countDown() 
      { 
       document.getElementById("here").innerHTML = count; 
       count--; 

       if(count == 0) 
       { 
        clearInterval(this); 
        countUp(); 
        setInterval(countUp, 200); 
       }  
      } 
     </script> 

     From 0 - 9, up and down:&nbsp;&nbsp;<div id = "here"></div> 
    </body> 
</html>

来源

2012-05-07 Ian Campbell

您需要捕获从setInterval(...)的返回值到一个变量因为这是参考计时器：

var interval; 

function onloadFunctions() 
{ 
    countUp(); 
    interval = setInterval(countUp, 200); 
} 

/* ... code ... */ 

function countDown() 
{ 
    document.getElementById("here").innerHTML = count; 
    count--; 

    if(count == 0) 
    { 
     clearInterval(interval); 
     countUp(); 
     interval = setInterval(countUp, 200); 
    } 
}

来源

2012-05-07 16:11:44 xandercoded

谢谢，这是做诡计！ –

clearInterval(this);。你不能那样做。您需要保存setInterval的返回值。

var interval; 
function onloadFunctions() 
{ 
    countUp(); 
    interval = setInterval(countUp, 200); 
} 

var count = 0; 
function countUp() 
{ 
    document.getElementById("here").innerHTML = count; 
    count++; 

    if(count == 10) 
    { 
     clearInterval(interval); 
     countDown(); 
     interval = setInterval(countDown, 200); 
    } 
} 
function countDown() 
{ 
    document.getElementById("here").innerHTML = count; 
    count--; 

    if(count == 0) 
    { 
     clearInterval(interval); 
     countUp(); 
     interval = setInterval(countUp, 200); 
    }  
}

来源

2012-05-07 16:13:54

试试这个：

... 
<body onload = "onloadFunctions();"> 

    <script> 
     var cup, cdown; // intervals 
     var count = 0, 
      here = document.getElementById("here"); 

     function onloadFunctions() { 
      cup = setInterval(countUp, 200); 
     } 

     function countUp() { 
      here.innerHTML = count; 
      count++; 

      if(count === 10) { 
       clearInterval(cup); 
       cdown = setInterval(countDown, 200); 
      } 
     } 
     function countDown() { 
      here.innerHTML = count; 
      count--; 

      if(count === 0) { 
       clearInterval(cdown); 
       cup = setInterval(countUp, 200); 
      }  
     } 
    </script> 

    From 0 - 9, up and down:&nbsp;&nbsp;<div id = "here"></div> 
</body>

你也可以创建一个单一的参考#here元素。使用的始终===代替==

来源

2012-05-07 16:15:02 fcalderan

有很多方法来解决这个问题，以下是我的建议：

function onloadFunctions() { 
    var count = 0; 
    var delta = 1; 
    var target = document.getElementById("here"); 
    var step = function() { 
     if(count <= 0) delta = 1; 
     if(count >= 9) delta = -1; 
     count += delta; 
     target.innerHTML = count; 
     window.setTimeout(step, 500); 
    } 
    step(); 
}

PS：它的安全使用setTimeout比setInteval。

来源

2012-05-07 16:39:37

如果我正在编写自己的代码，我可能更喜欢像你这样的解决方案。但是，提问者正在尝试一些练习 - 即在两种不同的功能之间来回跳动。你没有真正回答他的问题。 – Claude

@Claude，你说得对，我提出的另一个解决方案与原来的代码太不一样了。这是另一个可能的解决方案，使用setInterval和切换功能：

function onloadFunctions() { 
    var count = 0; 
    var refId = null; 
    var target = document.getElementById("aux"); 

    var countUp = function() { 
     target.innerHTML = count; 
     count ++; 
     if(count >= 9) { 
      window.clearInterval(refId); 
      refId = window.setInterval(countDown, 500); 
     } 
    } 

    var countDown = function() { 
     target.innerHTML = count; 
     count --; 
     if(count <= 0) { 
      window.clearInterval(refId); 
      refId = window.setInterval(countUp, 500); 
     } 
    } 
    refId = window.setInterval(countUp, 500); 
}

来源

2012-05-07 17:08:18

啊，关闭很有意思，谢谢。 –

与封闭好的实现，就像它。 – ChandlerQ

如何正确使用setInterval和clearInterval在两个不同的函数之间切换？

回答

相关问题