Run requestAnimationFrame elke 5 seconde

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Yoeri Achterbergen

Yoeri Achterbergen

06/03/2023 11:18:09
Quote Anchor link
Hallo,


Ik loop vast met het volgende in JavaScript
Wat ik probeer is om een requestAnimationFrame elke 5 seconden te laten lopen.
Als voorbeeld heb ik een fade in gemaakt met requestAnimationFrame.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
setTimeout(() => {
  let start;
  let ani = window.requestAnimationFrame(animation);
  function animation(timeStamp){
    document.getElementById('box').style.opacity = 0;
    if(!start){
        start = timeStamp;
      }
    const opacity = (timeStamp - start) / 3000;
    if(opacity >= 1){
      document.getElementById('box').style.opacity = 1;
      window.cancelAnimationFrame(ani);
      return;
    }
    document.getElementById('box').style.opacity = opacity;
    window.requestAnimationFrame(animation);
  }
}, 5000);


Helaas doet de code het maar 1x en word de loop zoals ik die zou willen van 5 seconden niet gedaan.


Wat zie ik over het hoofd?
 
PHP hulp

PHP hulp

19/03/2024 04:15:42
 
Jan R

Jan R

06/03/2023 12:27:59
Quote Anchor link
Je wacht 5000 ms dus 5" om de functie te starten. Eens deze gestart is start je deze niet meer.
Je moet deze lap code dus in een functie steken dan de functie aanroepen na 5" maar ook in de functie steken "doe dat nog ne keer binnen 5"
 
Ivo P

Ivo P

06/03/2023 15:46:38
Quote Anchor link
Je gebruikt setTimeout(), maar je zoekt setInterval()
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.