There is a function that starts another function, at regular intervals, but somewhere after 4 starts, the time starts to increase. Perhaps you need to clear the interval? But for some reason it does not work. After clearing the interval, the function does not start.

Where do I make a mistake?

var car = 7800 timerId = setTimeout(function tick() { AnimateAut() timerId = setTimeout(tick, car); clearTimeout(timerId); }, car);
  • 1. How do you clean the spacing? 2. Use set Interval() instead of setTimeout() set Interval() to periodically execute functions; 3. Why there is no semicolon after clearTimeout(timerId) ?; 4. What is the string timerId after it? - tutankhamun
  • @tutankhamun, What should the record of such a function look like via set Interval ()? - Dementiy1999
  • @ Dementiy1999 is the same, only instead of setTimeout - setInterval - mix
  • In your case, timerId = setInterval(AnimateAut, car); And note that the intervals in setTImeout() and setInterval() can increase when the browser loads a lot - tutankhamun

3 answers 3

You set the timer and immediately clear it, this is the error. I assume that such a construction will work correctly (install a new timer only after the previous one is completed):

 var car = 7800; function tick() { AnimateAut(); setTimeout(tick, car); } setTimeout(tick, car);

    I would also like to mention a specially developed (but not included in the standard) function - requestAnimationFrame .

    Its advantage is that the time to redraw the next frame is calculated automatically based on the browser load, tab activity, etc., and so on.

     // polifill (function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame; })(); let start = window.performance.now(); function rotation(el, T = 333, R = 100) { let stop; let style = window.getComputedStyle(el); let startX = parseFloat(style.left || 0); let startY = parseFloat(style.top || 0); const step = ts => { let t = ts - start; let x = Math.cos(t/T)*R + startX; let y = Math.sin(t/T)*R + startY; el.style.left = x + "px"; el.style.top = y + "px"; if (!stop) requestAnimationFrame(step); }; requestAnimationFrame(step); return ()=>stop=true; } let stopFn = rotation(document.querySelector('ball')); setTimeout(stopFn, 12000); 
     ball{ background-color: silver; border-radius: 100%; left: 100px; top: 100px; width: 5vw; height: 5vw; display: inline-block; position: absolute; } 
     <ball></ball>

      AngularJS Perfectly working option

       var promise; vm.start = function() { promise = $interval(setUnlocked, 60000); }; // stops the interval vm.stop = function() { $interval.cancel(promise); }; // starting the interval by default vm.start(); function setUnlocked() { vm.stop(); }
      • one
        Did someone ask for AngularJS? - Qwertiy ♦
      • Especially for fans. Well, the main idea and not the language is Mikhail Malakhvei