come posso usare setTimeout o setInterval durante l’iterazione su un array?

ho bisogno di iterare continuamente su un array (che in realtà contiene id utilizzati per generare immagini canvax).

quindi ho bisogno di iterare oltre l’array di chiavi più e più volte, con id essere impostato con un ritardo.

function animateCanvas() {
    keys = getKeys();
    let offset = 0;
    keys.forEach(function(key){
        setTimeout(function(){
            animateFrame(key);
        }, 2000 + offset);
        offset += 2000;
        keys = [];
    });
}


function animateFrame(id) {
    const animationCanvas = document.querySelector(`.canvas-animation`);
    const animationContext = animationCanvas.getContext('2d');
    const canvas1 = document.getElementById(id);
    animationContext.clearRect(0, 0, animationCanvas.width, animationCanvas.height);
    animationContext.drawImage(canvas1, 0,0, 170, 170, 0, 0 , 150, 150);
}

risultato atteso sarebbe infinita impostazione di un’altra immagine a tela tramite animateFrame (tasto) con un ritardo di 2 secondi

EN From: How do I use setTimeout or setInterval while iterating over an array?

More similar articles:

3 Comments

  1. userei un normale per il ciclo e resettare l’iteratore quando la lunghezza è raggiunta. Foreach imposta gli elementi da visitare all’inizio e non rivisita gli elementi.

  2. questo approccio non funziona come si vuole continuamente iterare sulle immagini. vorrei suggerire setInterval utente per esso.

    prova il codice qui sotto

    // This is your array of images
    var x = [1, 2, 3, 4];
    
    // This is your canvas displaying function
    function something(x) {console.log(x)}
    
    setInterval(() => {
      // It checks if we have reached the end
      if(curr == x.length - 1)
        curr = 0;
    
      something(x[curr]);
      curr++;
    }, 2000)
  3. hai pensato di usare .requestAnimationFrame() piuttosto che un loop? in realtà è abbastanza ideale per il vostro caso d’uso.

    questo è quello che sarebbe simile. nota il commento su dove aggiungere l’immagine alla tela.

    const data = ["<div></div>", "<section></section>", "<article></article>"];
    // Set delay to 5000 for 5 seconds
    const delay = 2000;
    // set previousCall to 1 to wait for first or -(delay) to start immediately
    let previousCall = -(delay);

    function animateCanvas(now) {
    if (now - previousCall >= delay) {
    // grab data from array in some fashion
    let id = parseInt(now/3 % 3);
    animateFrame(id);
    previousCall = now;
    }
    requestAnimationFrame(animateCanvas);
    }
    requestAnimationFrame(animateCanvas);

    function animateFrame(id) {
    document.body.innerHTML += data[id];
    }
    div, section, article {
    width: 50px;
    height: 50px;
    background-color: blue;
    margin: 3px;
    }
    div {
    background-color: blue;

    }
    section {
    background-color: yellow;

    }
    article {
    background-color: orange;

    } <!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    </head>

    <body>
    </body>

    </html>

Leave a Reply

Your email address will not be published. Required fields are marked *