Visualizzazione dei risultati da 1 a 1 su 1
  1. #1
    Utente di HTML.it L'avatar di leaf
    Registrato dal
    Oct 2012
    Messaggi
    316

    setTimeout e clearInterval con 2 timer

    ciao, ho applicazione che mostra un countdown e deve fare il seguente:
    1) ogni 1000ms chiamata ajax per eseguire query in db
    2) se ajax ritorna un risultato, la funziona countdown() viene chiamata
    3) ognivolta che la funzione countdown viene chiamata, il countdown viene resettato a partire dal nuovo valore ricevuto da ajax (passato alla funzione countdown) MA le chiamate ajax (punto 1) devono continuare in background indipendentemente dal nuovo timer

    Al momento il problema è che quando resetto il timer per il countdown (dentro la funziona countdown()) il setInterval iniziale (punto 1) si blocca. A me serve che continui invece a funzionare indipendentemente dal'altro countdown timer.

    Grazie!

    Questo è il codice. ho commentato la chiamata ajax per semplificare

    Ho un altra possibile soluzione per fare la stessa cosa che funziona diversamente ma che ha un problema simile (lo posto sotto)


    codice:
    $(document).ready(function() {
        $('#myLog').hide();
    
       //questo deve essere eseguito continuamente, per sempre
        setInterval(function(){setTimer(0);} , 1000);
    });
    
    function setTimer(){
        canvas = document.getElementById("myCanvas");
        log = document.getElementById("myLog");
        
       //chiamata per esempio
        countdown(5, 0);
    
        //$.ajax ({
        //    url: "ajax.php",
        //    success: function( result ) {
        //       countdown(result, 0);
        //    }
        //});
    
    }
    
    function countdown(minutes, seconds) {
        canvas.style.color = "black";
        canvas.innerHTML = "00:00";
    
       //reset countdown. funziona ma influisce anche su setInterval iniziale
        var id = window.setTimeout(null,0);
        while (id--)
            window.clearTimeout(id);
    
       //da qui in poi funziona tutto ok
    
        if(minutes == "OFF"){
            canvas.style.color = "#383838";
            canvas.innerHTML = "OFF";
            return;
        }
    
        var endTime, hours, mins, msLeft, time;
    
        function twoDigits( n )
        {
            return (n <= 9 ? "0" + n : n);
        }
    
        function updateTimer()
        {
            canvas.style.color = "black";
                canvas.innerHTML = "00:00"; //clear canvas
                msLeft = endTime - (+new Date);
                if ( msLeft < 1000 )                
                    flashyText();
                else {
                    canvas.style.color = "white";
                    time = new Date( msLeft );
                    hours = time.getUTCHours();
                    mins = time.getUTCMinutes();
                    canvas.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds());
                    setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
                }
            }
    
        endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
        updateTimer();
    }
    
    function flashyText() {
        var count = 1000000,
        timer = setInterval(function() {
            count--;
            if( count%2 == 1) {
                canvas.style.color = "red";
                canvas.innerHTML = "00:00"
            }
            else {
                canvas.style.color = "black";
                canvas.innerHTML = "00:00";
            }
            if( count == 0) clearInterval(timer);
        },1000);
    }

    Il secondo tentativo, funziona in maniera completamente diversa. Funziona quasi tutto tranne che clearInterval blocca anche setTimeout(setTimer(), 1000) e non dovrebbe essere così poichè questo timer dovrebbe essere sempre attivo e funzionante.


    codice:
    (function() {
        var interval = 0;
        var minutes = 0, seconds = 0;
    
        $(document).ready(function() {
            canvas = document.getElementById("myCanvas");
            log = document.getElementById("myLog");
            setTimer();
        });
    
        function setTimer() {
            
           //esempio di chiamata (è dentro ad ajax)
            countdown(5, 0);
    
        }
    
        function countdown(m, s) {
        
        // il casino succede qui. Il countdown deve ripartire da "m" ogni volta che arriviamo a questo punto
        //quindi credo vada messo fuori da m == OFF
        //però non deve andare a bloccare il setTimeout(setTimer(), 1000); più in basso,
        // che deve continuare a funzionare ininterrottamente
            if (m == "OFF") {
                if (interval != 0) {
                    window.clearInterval(interval);
                    interval = 0;
                }
                clearTimer();
                return;
            }
    
            minutes = m;
            seconds = s+1;
    
            if (interval == 0 && m != "OFF") {
                interval = window.setInterval(function() {
                    if (seconds > 0) {
                        seconds--;
                    } else if (minutes > 0) {
                        seconds = 59;
                        minutes--;
                    }
    
                    if (seconds > 0 || minutes > 0) {
                        updateTimer(minutes, seconds);
                    } else {
                        flashyText();
                    }
                }, 1000);
    
                updateTimer(minutes, seconds);
            }
        }
    
        function updateTimer(minutes, seconds) {
            window.setTimeout(setTimer, 1000);
            canvas.style.color = "#fff";
            canvas.innerHTML = minutes + ':' + twoDigits(seconds);
        }
    
        function clearTimer(){
            canvas.style.color = "#000";
            canvas.innerHTML = "00:00";
        }
    
        var flashy = 0;
        function flashyText() {
            window.setTimeout(setTimer, 1000);
            canvas.style.color = flashy ? "red" : "#000";
            canvas.innerHTML = "00:00";
            flashy = 1 - flashy;
        }
    
        function twoDigits(n) {
            return (n <= 9 ? "0" + n : n);
        }
    
    })();

  2. #2
    Utente di HTML.it
    Registrato dal
    May 2012
    Messaggi
    724
    ciao,
    1) ogni 1000ms chiamata ajax per eseguire query in db
    in questo caso dovresti avere una funzione chiamataAjax() che effettua la chiamata Ajax
    lanciata da una linea :
    var intervallo=setTimeout(chiamataAjax,1000)
    e la chiamata contdown() che gestirà il contdown iniziale a video.
    2) se ajax ritorna un risultato, la funziona countdown() viene chiamata
    in questo caso dovrai avere un'altra funzione che gestisce il risultato della chiamata ajax chiamiamola risultatoAjax().
    Tu non puoi sapere quando il server risponde, visto che la chiamata è asincrona, quindi la chiamata ajax non deve ripetersi fino a quando il server non risponde e non hai il nuovo risultato.
    Infatti c'è un problema, se tu reimposti dentro questa funzione (chiamataAjax) un nuovo intervallo di chiamata alla chiamata chiamataAjax stessa, la funzione, in teoria, potrebbe essere rilanciata prima che il server risponda, quindi devi aspettare che il server ti risponda e poi impostare il nuovo intervallo a chiamataAjax, dentro la funzione risultatoAjax, solo quando il server ti ha risposto, partendo ovviamente dal presupposto che il server ti risponda sempre, prima o poi.
    3) ognivolta che la funzione countdown viene chiamata, il countdown viene resettato a partire dal nuovo valore ricevuto da ajax (passato alla funzione countdown) MA le chiamate ajax (punto 1) devono continuare in background indipendentemente dal nuovo timer
    Ok, quando il server ti risponde la funzione risultatoAjax() imposterà il nuovo contdown passandogli il parametro e imposterà un nuovo intervallo della chiamataAjax
    E cosa deve succedere se non ti restituisce un nuovo risultato?
    Ultima modifica di robynosse; 21-02-2018 a 11:39

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.