clearTimeout不工作的if語句

Question

稱爲此代碼應結束前10秒時運行，但如果您再次運行功能，10秒鐘完成之前，應該明確theTimeout一遍又一遍

開始10秒

function start() { 
 
    let counter = 0; 
 
    let timeUp = true; 
 
    let hello; 
 
    setInterval(()=> { 
 
     counter++ 
 
     console.log(counter) 
 
    },1000); 
 
    if (timeUp == false) { 
 
     clearTimeout(hello) 
 
     timeUp = true 
 
     console.log('should run again with new clock') 
 
     start() 
 
    } else { 
 
     console.log('new clock started') 
 
     timeUp = false; 
 
     hello = setTimeout(() => { 
 
     timeUp = true 
 
     console.log('end clock') 
 
     }, 10000); 
 
    }; 
 
    };

Answer 1

裏面的功能start，timeUp始終設置爲true，從而clearTimeout將永遠不會被調用。你做事的方式，你應該讓timeUp成爲一個全局變量，所以如果時間已經到達或沒有達到，函數就有「內存」。

但是爲什麼你需要設置兩個間隔？您已經記錄了已經過去的秒數，因此我們可以利用該時間間隔來確定何時過去了10秒。這簡化事情不少，而且可以讓我們擺脫timeUp變量，以及：

let interval; 

function start() { 
    let counter = 0; 
    clearInterval(interval); // clear the previous interval 
    interval = setInterval(() => { // set a new interval 
     counter++; 
     if (counter == 10) { 
      console.log('end of clock'); 
      clearInterval(interval); 
     } 
     console.log(counter); 
    }, 1000); 
} 

這實現你想要什麼。每當調用start時，它將取消前一個間隔並創建一個新間隔。一旦過了10秒，它就會清除間隔。

Answer 2

當你再次調用start()，這個新的功能沒有提到hello或timeUp 試試這樣說：

let hello 
 
let timeUp = true 
 

 
function start() { 
 
    let counter = 0; 
 
    //let timeUp = true; 
 
    //let hello; 
 
    setInterval(()=> { 
 
     counter++ 
 
     console.log(counter) 
 
    },1000); 
 
    if (timeUp == false) { 
 
     clearTimeout(hello) 
 
     timeUp = true 
 
     console.log('should run again with new clock') 
 
     start() 
 
    } else { 
 
     console.log('new clock started') 
 
     timeUp = false; 
 
     hello = setTimeout(() => { 
 
     timeUp = true 
 
     console.log('end clock') 
 
     }, 10000); 
 
    }; 
 
    }; 
 
    
 
    window.start = start

Answer 3

你的做法是一種誤導。我認爲更好的辦法是有一個計時器對象，你就可以開始：

function Timer() { 
 
    var self = { 
 
     // Declare a function to start it for a certain duration 
 
     start: function(duration){ 
 
      self.counter = 0; 
 
      self.duration = duration; 
 
      clearTimeout(self.timeout); // Reset previous timeout if there is one 
 
      console.log("New counter starting."); 
 
      self.count(); 
 
     }, 
 
     // A function to count 1 by 1 
 
     count: function(){ 
 
      console.log(self.counter); 
 
      self.counter++; 
 
      if(self.counter > self.duration){ 
 
       console.log('Time is up.'); 
 
      } else { 
 
       self.timeout = setTimeout(self.count, 1000); // not over yet 
 
      } 
 
     } 
 
     // and other functions like stop, pause, etc if needed 
 
    }; 
 
    return self; 
 
} 
 

 
// Declare your Timer 
 
var myTimer = new Timer(); 
 

 
// Start it on click 
 
document.getElementById('start-btn').addEventListener('click', function(){ 
 
    myTimer.start(10); 
 
}, true);

<button id="start-btn">Start the timer</button>