Richiamare funzione ogni x secondi

**sixdas** · 07-06-2015, 13:06

Salve, ho la necessità di aggiornare un div con dei dati che prelevo da un db tramite una chiamata ajax, fin qui è tutto ok, siccome i dati potrebbe cambiare in fretta ho la necessità di richiamare la funzione che aggiorna il div, in modo da visualizzare sempre i dati aggiornati. Ho pensato di utilizzare

codice:

setInterval(function(){ //chiamata ajax etc... }, 5000);

In questo modo una volta richiamata la funzione questa si ripete ogni 5 secondi. Secondo voi questa è la soluzione migliore? interrogando il db ogni 5 secondi rischierei di rallentare il tutto?

**cavicchiandrea** · 07-06-2015, 14:11

Premessa: Dipende molto dalla mole di dati che interroghi e dal traffico generato dal sito.
L'approccio più preformante e immediato ritengo sia usare node.js (framework js lato server) valuta se è il caso

**carlomarx** · 08-06-2015, 16:46

Originariamente inviata da sixdas

Secondo voi questa è la soluzione migliore?

No. Con AJAX meglio evitare il setInterval: meglio una chiamata ricorsiva di setTimeout…:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AJAX setTimeout Example</title>
<script type="text/javascript">
var dataUpdater = new (function () {

    function sendRequest () {
        oReq.open("GET", "dati.txt", true);
        oReq.send();
    }

    function reqListen () {
      alert(this.responseText); // trasforma l'alert in quello che vuoi fare realmente con quel responseText

      // Quest'istruzione deve rimanere l'ultima della funzione
      setTimeout(sendRequest, 5000);
    }

    function reqError (oErr) {
        alert("There has been an error");
    }

    var oReq = new XMLHttpRequest();
    oReq.onload = reqListen;
    oReq.onerror = reqError;
    this.start = sendRequest;

})();

onload = dataUpdater.start;
</script>
</head>

<body>

</body>
</html>

**sixdas** · 09-06-2015, 20:25

Ciao, mi aiuti a capire, io avevo risolto in questo modo:

Premendo un un bottone avvio la funzione temporizzata:

codice:

function StartChat(){    $('#result-chat').html('<div id="loader-chat"><img src="images/svg-loaders/loader-chat.svg" height="70" width="70"/></div>');
    tm = window.setInterval('ShowMessages()',4000);
    console.log('avvio chat');
}// end StartChat

Prelevo i messaggi dal database:

codice:

function ShowMessages() {    //Chiamata ajax
    $.ajax({
        //Imposto il tipo di invio dati
        type: "POST",
        //Invio i dati alla pagina php
        url: "http://sito.it/query.php",
        //Dati ricevuti in formato html
        dataType: "html",
        success: function(msg)
        {
            $("#result-chat").html(msg);
            $("#result-chat").fadeIn(1500);
  
            // debug
            console.log('Counter "ShowMessages"');
        },
        error: function()
        {
            console.log('Chiamata ajax fallita!');
        }
    });
}// end ShowMessages

Stop la funzione

codice:

function stopMessages(){
    window.clearInterval(tm);
    console.log('stop chat');
}// end stopMessages

Come posso convertirla nel tuo metodo?

**carlomarx** · 13-06-2015, 01:22

Originariamente inviata da sixdas

Come posso convertirla nel tuo metodo?

JavaScript:

codice:

var dataUpdater = new (function () {

    function sendRequest () {
        oReq.open("GET", "http://sito.it/query.php", true);
        oReq.send();
    }

    function reqListen () {
        $("#result-chat").html(this.responseText);
        $("#result-chat").fadeIn(1500);
        console.log("Counter \"ShowMessages\"");
        nSession = setTimeout(sendRequest, 5000);
    }

    function reqError (oErr) {
        console.log("Chiamata ajax fallita!");
    }

    var
        nSession = -1, oReq = new XMLHttpRequest();

    oReq.onload = reqListen;
    oReq.onerror = reqError;

    this.start = function () {
        if (nSession !== -1) { return false; }
        sendRequest();
        return true;
    };

    this.stop = function () {
        clearTimeout(nSession);
        nSession = -1;
    };

})();

// Se non ti serve l'onload rimuovilo...
onload = dataUpdater.start;

HTML:

codice:

<span onclick="dataUpdater.stop();" style="color: #0000ff; text-decoration: underline; cursor: pointer;">Ferma il ciclo</span> |
<span onclick="dataUpdater.start();" style="color: #0000ff; text-decoration: underline; cursor: pointer;">Avvia il ciclo</span>

Discussione: Richiamare funzione ogni x secondi

Strumenti discussione

Ricerca discussione

Visualizza

Richiamare funzione ogni x secondi

Permessi di invio