clearTimeout не работает при вызове, если заявление

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>