Jak poprawnie używać funkcji setInterval i clearInterval do przełączania między dwiema różnymi funkcjami?

Dla celów praktycznych próbuję wyświetlić liczbę, która zwiększa się od 0 do 9, a następnie zmniejsza z 9 do 0 i powtarza się w nieskończoność.

Kod, który do tej pory wydaje mi się bliski, ale po drugiej iteracji wywołania moich dwóch odpowiednich funkcji wydają się być ze sobą sprzeczne, ponieważ wyświetlane liczby nie liczą się w zamierzonej kolejności. .. a następnie przeglądarka się zawiesza.

Oto mój kod:

Jak poprawnie używać funkcji setInterval i clearInterval do przełączania między dwiema różnymi funkcjami?

<!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>

Źródło

2012-05-07 Ian Campbell

Trzeba uchwycić wartości zwracanej z setInterval(...) do zmiennej, jak to jest odniesienie do zegara:

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); 
    } 
}

Źródło

2012-05-07 16:11:44 xandercoded

Dzięki, to się udało! –

clearInterval(this);. Nie możesz tego zrobić. Musisz zapisać wartość zwracaną z 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); 
    }  
}

Źródło

2012-05-07 16:13:54

spróbuj tego:

... 
<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>

można również utworzyć pojedynczy odniesienie do #here elementu. Używaj zawsze === zamiast ==

Źródło

2012-05-07 16:15:02 fcalderan

Istnieje wiele sposobów, aby rozwiązać ten problem, po to moja propozycja:

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: to bezpieczniejsze w użyciu setTimeout niż setInteval.

Źródło

2012-05-07 16:39:37

Gdybym pisał własny kod, wolałbym takie rozwiązanie jak twoje. Ale pytający próbuje coś dla praktyki - mianowicie przeskakiwanie pomiędzy dwiema różnymi funkcjami. W rzeczywistości nie odpowiedziałeś na jego pytanie. – Claude

@Claude, masz rację, inne rozwiązanie, które zaproponowałem, było zbyt różne od oryginalnego kodu. To jest inne możliwe rozwiązanie, używając setInterval i funkcji przełączania:

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); 
}

Źródło

2012-05-07 17:08:18

Ah, z zamknięciem jest interesujące, dzięki. –

Ładna implementacja z zamknięciem, lubię to. – ChandlerQ

Jak poprawnie używać funkcji setInterval i clearInterval do przełączania między dwiema różnymi funkcjami?

Odpowiedz

Powiązane problemy