Pausar actualización en jquery

[roncco]

Buenas.

Estoy empezando a trastear con jquery y empiezan a surgirme las típicas dudas tontas de cuando empiezas con algo (novias inclusive). Os cuento:

La idea es cargar mediante la función load en un div una tabla cuyos campos provienen de una base de datos. Cada x segundos con setInterval esa tabla se
actualiza, y van apareciendo los mensajes nuevos (algo parecido a la fisgona de menéame, pero en cutre, para entendernos).

Hasta ahí todo bien, pero estoy intentando que mientras el usuario tenga el ratón sobre la tabla, esta no se actualice (para que no tenga que ir persiguiendo un determinado campo por toda la pantalla).

Lo he intentado de cincuenta mil maneras, la última así:


function rehaz(){
$('.visor').load('/include/vista/loUltimo.php');
}

if(!$('.visorl').mouseover()){
var timer = setInterval(rehaz,5000);
});


Y nada, que no hay manera, así que he optado por pediros ayuda y darme a la bebida simultáneamente.

Gracias anticipadas

[Naahuel]

Supongo que algo así podría funcionar:

Código Javascript:

var $visor = $('.visor');
var actualizar = true;
 
$visor.mouseenter(function(){
    actualizar = false;
});
$visor.mouseleave(function(){
    actualizar = true;
});
 
function rehaz(){
    if(actualizar){
        $visor.load('/include/vista/loUltimo.php');
    }
}
 

Si no, al menos tenés una idea de cómo pensar la lógica y cómo almacenar objetos jQuery para no estar examinando el DOM a cada rato.

[roncco]

mil gracias. Ahora lo pruebo

[roncco]

Funciona genial, gracias, Naahuel.

Abusando de vuestra amabilidad, estoy tratando de que si cuando se actualiza la tabla el último registro coincide con el que ya existía antes de la actualización, esto es, que no ha habido novedades, el script haga una cosa, y si en cambio sí que hay campos nuevos, haga otra. Lo estoy intentando hacer así, pero seguro que estoy haciendo algo mal.

Código Javascript:

var $visor = $('.visor');
 var actualizar = true;
     
$visor.mouseenter(function(){
        actualizar = false;
});
$visor.mouseleave(function(){
        actualizar = true;
});
    
 function rehaz(){
    
    var primero = $('td.textoOculto:first').text();  
    var segundo ='';
    
    if(actualizar){
            $visor.load('/include/vista/loUltimo.php');
        $('td.textoOculto').fadeOut('3000');
        var segundo = $('td.textoOculto:first').text();  
            
       if(primero != segundo){
                alert('no coinciden');
    }
        }
    }
 
var timer = setInterval(rehaz,5000);
 

¿Dónde está el fallo?

[Naahuel]

No sé, ¿no lo tenés funcionando online en algún lado?

No entiendo muy bien igual. Si hacés esto:

Código Javascript:

$visor.load('/include/vista/loUltimo.php');
 

Y después hacés el chequeo si el registro ya existía, $.load() ya lo cargó de todas formas.

Otro error es que te olvidás que .load() es AJAX y es asincrónico. Es decir, se ejecuta en forma paralela y lo que le sigue a .load() no espera que esto termine para continuar.

Probá haciendo el chequeo en una función callback que se ejecutaría cuando load() finalice de cargar:

Código Javascript:

function rehaz(){
 
    var primero = $('td.textoOculto:first').text();  
    var segundo ='';
 
    if(actualizar){
        $visor.load('/include/vista/loUltimo.php',function(){
            $('td.textoOculto').fadeOut('3000');
            var segundo = $('td.textoOculto:first').text();  
 
            if(primero != segundo){
                alert('no coinciden');
            }
        });
    }
}
 

Otra cosa que está rara son los selectores. Son muuuuy amplios. Si tenés otra tabla en el documento va a causar conflictos. Usá selectores más específicos.

Por ejemplo, si la tabla está dentro del elemento .visor, yo haría algo así:

Código Javascript:

$visor.find('td.textoOculto')
 

en lugar de:

Código Javascript:

$('td.textoOculto')
 

pues este último selector es menos específico, más lento y además conflictivo con otras tablas en el documento.

[roncco]

Gracias de nuevo, me has solucionado dos problemas de un plumazo.