How to stop the execution of setInterval () which was executed using onLoad ()?

Question

How to stop the execution of setInterval () which was executed using onLoad ()?

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Hello colleagues, I have had a very annoying problem and it is as follows: I have a whole page made in ajax and jquery and I have different menus; and for example when entering the first menu, inside the HTML code I have an image with a Javascript onLoad method that loads a function, which executes another function called load () in a 20 seconds interval:

pagina.php

...
     <img src="../images/calendario-semanal.png" alt="" border="0" onload="refresh_automatico();" /> 
...

sript.js

function refresh_automatico(){

        $(document).ready(function(){
        clearInterval(refreshId);
                 var refreshId =  setInterval( function(){
                     load();
                 }, 20000 );
            });
}

Until there everything perfect, just entered pagina.php, the script runs automatically refreshing every 20 seconds, but when I go to another page I see that it is still running and when I return to pagina.php I notice that the calls are duplicated and They are no longer 20 seconds but run many times. How do I stop that execution by clicking on another page of my project?

Thank you very much guys, I would thank you in your soul for your help.

Blessings

javascript jquery html php ajax

asked by luis_gomez 23.06.2018 в 05:31

source

2 answers

1

I would use something like this:

  //Declara la variable del intervalo de manera global para que aunque la definas en la funcion puedas acceder desde fuera
  var refreshId =  setInterval( function(){
                 load();
             }, 20000 );
  window.onbeforeunload = function(e) {
     clearInterval(refreshId);
     return "Hecho";
  };

Emphasize that according to the docs this event should return a string and that the code I have not tested it

answered by 25.06.2018 в 00:23

Do not query DB SQL Query that generates exception ReportViewer, Visual Studio 2015, C #, MariaDB10 (SOLVED)

score 1 · Accepted Answer

To control which functions are executed depending on the page on which you are currently able to do the following:

// Determina cual es página actual.
function initializer(){
    /* Supongase que la URL tiene la forma -- http://myweb.com/page1 -- */
    $(document).ready(function(){
        // Obtener la URL y convertirlo en un arreglo
        let _url = window.location.pathname.split( '/' );
        // En este caso _url[0] = 'mywebcom' y _url[1] = 'page1'

        //Ahora se determina que página se esta cargando y ejecutar
        // la o las funciones necesarias.
        if (_url[1] !== undefined) {
            switch (_url[1]) {
                case 'pagina1':
                    /* Función a ejecutar cuando se carga página1 */
                    refresh_automatico();
                    break;
                case 'pagina2':
                    /* Función a ejecutar cuando se carga página2 */
                    anotherFunction();
                    break;

            } //End-Switch
        } // End-If
    });
}

function refresh_automatico(){
    clearInterval(refreshId);
    var refreshId =  setInterval( function(){
       load();
    }, 20000 );
}

function load(){
   /* Your load function */
   console.log('execute Function')
}

That's all, I hope it's what you're looking for and above all it's useful for you.

== > Based on your comments, you have tried something like:

function consultar(valor) { 
    conexion=crearXMLHttpRequest(); 
    conexion.onreadystatechange = procesarEventos; 
    conexion.open('GET', './redireccionador.php?num=' + valor, true); 

    if(valor == 'consultar_citas') {
        /* Si el parametro es consultar_citas realizar carga de la citas*/
        load()
    }

    conexion.send(null);
}