Làm cách nào để sử dụng chính xác setInterval và clearInterval để chuyển đổi giữa hai hàm khác nhau?

Để thực hành, tôi đang cố hiển thị số tăng từ 0 - 9, sau đó giảm từ 9 - 0 và lặp lại vô hạn.

Mã mà tôi có cho đến nay dường như rất gần, nhưng khi lặp lại lần thứ hai, các cuộc gọi setInterval của 2 chức năng tương ứng countUp và countDown dường như xung đột với nhau, vì các số được hiển thị không được tính theo thứ tự mong muốn. .. và sau đó trình duyệt bị treo.

Đây là mã của tôi:

Làm cách nào để sử dụng chính xác setInterval và clearInterval để chuyển đổi giữa hai hàm khác nhau?

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

Nguồn

2012-05-07 Ian Campbell

Bạn cần phải nắm bắt các giá trị trả về từ setInterval(...) vào một biến như đó là tham chiếu đến bộ đếm thời gian:

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

Nguồn

2012-05-07 16:11:44 xandercoded

Xin cảm ơn, điều đó đã xảy ra! –

clearInterval(this);. Bạn không thể làm điều đó. Bạn cần lưu giá trị trả lại từ 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); 
    }  
}

Nguồn

2012-05-07 16:13:54

thử điều này:

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

bạn cũng có thể tạo ra một tham chiếu duy nhất để #here phần tử. Sử dụng luôn === thay vì ==

Nguồn

2012-05-07 16:15:02 fcalderan

Có rất nhiều cách để giải quyết vấn đề này, sau đây là gợi ý của tôi:

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: đó là an toàn hơn để sử dụng setTimeout hơn setInteval.

Nguồn

2012-05-07 16:39:37

Nếu tôi đang viết mã của riêng mình, tôi có thể thích một giải pháp như của bạn. Nhưng, người hỏi đang cố gắng thực hành cái gì đó - cụ thể là nhảy qua lại giữa hai chức năng khác nhau. Bạn đã không thực sự trả lời câu hỏi của mình. – Claude

@Claude, bạn nói đúng, giải pháp khác tôi đề xuất quá khác so với mã gốc. Đây là một giải pháp khả thi khác, sử dụng setInterval và các chức năng chuyển đổi:

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

Nguồn

2012-05-07 17:08:18

Ah, với đóng cửa là thú vị, cảm ơn. –

Thực hiện tốt đẹp với đóng cửa, giống như nó. – ChandlerQ

Làm cách nào để sử dụng chính xác setInterval và clearInterval để chuyển đổi giữa hai hàm khác nhau?

Trả lời

Các vấn đề liên quan