+ Rispondi al messaggio
Visualizzazione dei risultati da 1 a 6 su 6

setInterval e clearInterval in 2 funzioni in loop

  1. #1
    BennyB non è in linea Scolaretto
    Salve.
    Il titolo non è così esplicativo come vorrei, ma non saprei come altro spiegare succintamente il mio problema.
    Si tratta di questo. Tramite una funzione, chiamo una funzione ricorsiva che compila un testo un HTML; al termine di un conteggio interno, effettua un'altra chiamata ad un'ultima funzione (tramite setInterval ) che fa 'lampeggiare' il testo suddetto.
    Funziona tutto correttamente tranne che per una cosa che non comprendo: c'è un'altra variabile contatore nell'ultima funzione posta dopo il comando clearInterval che continua ad incrementarsi all'infinito.
    Questo in breve è il codice:
          
    let index = 0;
    
    let scrivi2 = function(rifEl, el){
       // codice vario
        if (progr == parola.length) {
          index = 0;
          timer1 = setInterval(blink,150, rifEl)
        }
    }
    let blink = function(rifer){
       if (index == 20) {
         clearInterval(timer1);
         return;
       }else {
             index++;
             rifer.style.visibility = index % 2 !== 0 ? 'hidden' : 'visible';
       }
    };
    
    La variabile index interrompe correttamente il 'lampeggio' quando raggiunge le 20 iterazioni, ma poi continua ad incrementarsi all'infinito.
    Perché?
    Aggiungo che 'scrivi2' è chiamata da una funzione a monte (il codice è molto lungo, non ha molto senso postarlo tutto, credo).
    Probabilmente il difetto ha a che fare con le funzioni nidificate e con la logica di JS (sono un autodidatta, e sto cercando di imparare, quindi siate indulgenti), ma non capisco dove sbaglio.

  2. #2
    L'avatar di sspintux
    sspintux non è in linea Very Important Person Ultimo blog: SqlServer express e connessione DAC
    Quote Originariamente inviato da BennyB Visualizza il messaggio
    Salve.
    ...
    La variabile index interrompe correttamente il 'lampeggio' quando raggiunge le 20 iterazioni, ma poi continua ad incrementarsi all'infinito.
    Perché?
    Boh ... non lo so .
    Ma non puoi aggiungere index=0 dopo che la chiamata al ClearInterval ?
    ℹ️ Leggi di più su sspintux ...

  3. #3
    L'avatar di _alka_
    _alka_ non è in linea Very Important Person
    Quote Originariamente inviato da BennyB Visualizza il messaggio
    La variabile index interrompe correttamente il 'lampeggio' quando raggiunge le 20 iterazioni, ma poi continua ad incrementarsi all'infinito.
    Perché?
    La disattivazione della chiamata periodica della funzione con clearInterval impedisce che vengano inseriti nella coda degli eventi altre chiamate a quella funzione, ma nulla vieta che ve ne siano magari altre in coda pronte a essere eseguite e che vanno a incrementare la variabile in questione.

    Potrebbe esserci anche qualche altro fattore ma questo richiederebbe di vedere il codice completo per approfondire la questione.

    Ciao!
    ℹ️ Leggi di più su _alka_ ...

  4. #4
    BennyB non è in linea Scolaretto
    Giusto.
    Allora, allego codePen.
    La cosa interessante è che index nel tag PRE termina giustamente a 20, ma se si osserva il log in console, si nota che invece la variabile continua ad incrementarsi (io lo visualizzo in Chrome). Magari è normale (??), ma certo è stravagante.
    Provare per credere...

  5. #5
    L'avatar di _alka_
    _alka_ non è in linea Very Important Person
    Ho individuato il problema: oltre al setInterval(), fai uso anche di setTimeout() per richiamare la prima funzione dopo un certo lasso di tempo, solo che in questo modo entri due volte nel ramo che avvia l'intervallo, e quindi di fatto in esecuzione hai due intervalli ravvicinati che si susseguono.

    Per intenderci, nella funzione scrivi2() dovresti eliminare l'eventuale timeout per la chiamata seguente quando dai il via all'intervallo periodico di lampeggiamento:

    let scrivi2 = function (rifEl, el) {
      // console.log(progr, el[progr]);
      if (progr < el.length) {
        let opt = document.createElement("span");
        opt.innerHTML = el[progr];
        opt.classList.add("letter");
        rifEl.appendChild(opt);
        progr++;
        timeout = setTimeout(scrivi2, 100, rifEl, el);
      }
      if (progr == parola.length) {
        index = 0;
        timer1 = setInterval(blink, 150, rifEl);
        clearTimeout(timeout);
      }
    };
    
    Vedi le righe con le chiamate a setTimeout() e clearTimeout().

    Ciao!
    ℹ️ Leggi di più su _alka_ ...

  6. #6
    BennyB non è in linea Scolaretto
    Perfetto. Avrei dovuto pensarci. A dirla tutta, non ho mai considerato il metodo 'clearTimeout', ma sempre e solo 'ClearInterval'. Certo, il secondo è necessario, se non si vuole un ciclo infinito (e talvolta serve), ma giustamente, un ciclo 'setTimeout' si può interrompere.

    Grazie della soluzione. Mi serve anche per altre attività.

+ Rispondi al messaggio

Potrebbero interessarti anche ...

  1. Do Loop While
    Da Skiapparov nel forum Microsoft Excel
    Risposte: 2
    Ultimo Post: 23-07-2013, 09:32
  2. [C] Loop con fflush
    Da cup490 nel forum C/C++
    Risposte: 1
    Ultimo Post: 14-02-2013, 10:04
  3. Loop all'avvio
    Da Krom90 nel forum Microsoft Windows
    Risposte: 32
    Ultimo Post: 27-08-2008, 17:17
  4. Do Loop
    Da John nel forum Microsoft Word
    Risposte: 2
    Ultimo Post: 06-02-2007, 15:54
  5. do loop
    Da powder nel forum Visual Basic 6
    Risposte: 4
    Ultimo Post: 09-09-2003, 09:48