SetInteval with delay dynamic

91 views Asked by At

I have one problem with setInterval. When user select option(time) i would to time of setInterval change dynamic. This code works if user change from the first (select) and if he change from 10 to 1, not 1 to 10.
if i console.log(convertTime) i see dynamic change, but not in this setInterval..

Can I use your skills ? Thanks

Function inter() make random words

choiseTime.addEventListener("change", (e) => 
  {
  let timeSelect = e.target.selectedIndex;
  convertTime    = timeSelect * 1000;
  inter();
  setInterval(inter, convertTime);
  if (timeSelect < 4) 
    {
    alert.innerHTML = `En sélectionnant une durée de ${timeSelect}s vous irez sans doute trop vite. L'intervalle conseillé est de 4 à 7s par mot.`;
    } 
  else 
   {
   alert.innerHTML = "";
   }
 }); 
1

There are 1 answers

1
JeanJacquesGourdin On

var alert = document.querySelector('#alert')
var interval
var timeToWait = 1000

const startCycle = (toWait) => {
  if(interval){
    clearInterval(interval)
  }
  interval = setInterval(()=>{
    console.log('I\'ve waited '+toWait/1000+'s')
  }, toWait)
}

document.querySelector('#start').addEventListener("click", (e) => {
  startCycle(timeToWait)
});

document.querySelector('#plus').addEventListener("click", (e) => {
  timeToWait = timeToWait + 100
  startCycle(timeToWait)
  if(timeToWait >= 500){
    alert.innerHTML = `En sélectionnant une durée trop basse vous irez sans doute trop vite.`;
  }
});

document.querySelector('#minus').addEventListener("click", (e) => {
  if(timeToWait !== 100){
    timeToWait = timeToWait - 100
    startCycle(timeToWait)
  }
  if(timeToWait < 500){
    alert.innerHTML = `En sélectionnant une durée trop basse vous irez sans doute trop vite.`;
  }

});
<div style='display: flex;'>
 <button id='plus'>Augmenter</button>
 <button id='start'>Commencer</button>
 <button id='minus'>Diminuer</button>
<div>
<p id='alert'></p>