JavaScript - Ayuda con setInterval

   
Vista:
Imágen de perfil de Jordi

Ayuda con setInterval

Publicado por Jordi (23 intervenciones) el 20/08/2014 20:25:29
Hola, soy nuevo en este foro, y esta es mi primera publicación. Espero que me podáis ayudar con esto.

Estoy haciendo una pequeña pagina y en un apartado hice un buscador, para encontrar a la lista de clientes deseados. Esto lo hice con una pagina dentro de un div que con el setInterval se actualiza cada 0.05 segundos con la lista dependiendo de lo que se haya puesto en el campo de buscar. El caso es que quiero que el setInterval pare o se pause si lo que hay en el campo de buscar no ha cambiado desde la ultima busqueda.

index.php - Es donde hay el javascript, y dentro hay un div donde se carga clients.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html>
<head>
<meta charset="UTF-8" />
<title>Pc Calaf Informatica SL</title>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-type" content="Mime-Type; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="assets/css/estructuraGestor.css" />
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript" type="text/javascript">
    //Javascript para poner una "pagina" dentro de un "div"
	function cargarPagina(div, pagina){
    	$(div).load(pagina);
    }
</script>
 
<script>
	//Cada 0.05 segons se carga la pagina php que nos muestra los clientes filtrados por el texto que le pasamos desde el buscador de clientes
	setInterval(function() {
		$("taulaClients").load("contingut/buscador.php?palabra=" + $("#test").val());
	}, 50);
</script>
 
</head>
<body>
<header>
	<menu>
		<icono>
        	<a href="javascript:void()" onclick="cargarPagina('#contingut','contingut/clientAlta.php')"><img src="assets/icons/clientNou.png" alt="Nou Client" title="Nou Client"/></a>
        </icono>
        <icono>
        	<a href="javascript:void()" onclick="cargarPagina('#contingut','contingut/clients.php')"><img src="assets/icons/clients.png" alt="Clients" title="Clients"/></a>
        </icono>
        <icono>
        	<a href="javascript:void()" onclick="cargarPagina('#contingut','contingut/ventaAlta.php')"><img src="assets/icons/ventaNova.png" alt="Nova Venta" title="Nova Venta"/></a>
        </icono>
        <icono>
        	<a href="javascript:void()" onclick="cargarPagina('#contingut','contingut/ventes.php')"><img src="assets/icons/ventes.png"  alt="Ventes" title="Ventes"/></a>
        </icono>
        <icono>
        	<a href="javascript:void()" onclick="cargarPagina('#contingut','contingut/averiaAlta.php')"/><img src="assets/icons/averiaNova.png" alt="Nova Averia" title="Nova Averia"/></a>
        </icono>
		<icono>
        	<a href="javascript:void()" onclick="cargarPagina('#contingut','contingut/averies.php')"/><img src="assets/icons/averies.png" alt="Averies" title="Averies"/></a>
		</icono>
    </menu>
</header>
 
<div id="contenedor">
	<div id="contingut"></div>
</div>
</body>
</html>


clients.php - Es la pagina que tiene el campo de buscador, y que se carga dentro del div de index.php (<taulaClients>)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php
 
	session_start();
	$connect = mysql_connect("localhost","pccalaf","pcGestor");
		if (!$connect) {
			die('No se ha podido acceder al servidor ' . mysql_error());
		}
 
	$bd = mysql_select_db("PcGestor",$connect);
		if (!$bd) {
			die('Base de datos no encontrada ' . mysql_error());
		}
 
	//Consulta que ens retornara tots els clients de la taula
	$clients = mysql_query("SELECT * FROM clients ORDER BY cognom1 ASC");
 
?>
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-type" content="Mime-Type; charset=iso-8859-1" />
</head>
<body>
	<!-- Buscador de clients per filtrar la llista de clients -->
	<buscadorClients>
    	<p><input type="text" id="test" placeholder="Buscar..."></p>
    </buscadorClients>
 
    <!-- Capa on es mostrara la llista de clients filtrada segons el camp de text -->
	<taulaClients></taulaClients>
</body>
</html>

buscador.php - Es la pagina que se carga cada 0.05 segundos dentro del div de clients.php (<taulaClients>)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<?php
 
	session_start();
	$connect = mysql_connect("localhost","pccalaf","pcGestor");
		if (!$connect) {
			die('No se ha podido acceder al servidor ' . mysql_error());
		}
 
	$bd = mysql_select_db("PcGestor",$connect);
		if (!$bd) {
			die('Base de datos no encontrada ' . mysql_error());
		}
?>
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-type" content="Mime-Type; charset=iso-8859-1" />
</head>
<body>
	<?php
	//Consulta que ens retornara tots els clients de la taula
	$clients = mysql_query("SELECT * FROM clients WHERE cognom1 LIKE '".$_GET['palabra']."%'");
	?>
	<taulaClients>
    	<table border="1">
        	<th>Nom</th><th>Telefon-1</th><th>Telefon-2</th>
            <th>Mail</th><th>Direcció</th><th>Població</th><th>Data d'Alta</th><th>Observacions</th>
			<?php
                //Bucle per recorrer tots els clients
                while($client = mysql_fetch_array($clients)) { 
            ?>
            <tr>
            	<td><?= $client['nom']." ".$client['cognom1']." ".$client['cognom2'] ?></td>
                <td><?= $client['telefon1'] ?></td>
                <td><?= $client['telefon2'] ?></td>
            	<td><?= $client['mail'] ?></td>
                <td><?= $client['direccio'] ?></td>
                <td><?= $client['poblacio'] ?></td>
                <td><?= $client['dataAlta'] ?></td>
            	<td><?= $client['observacions'] ?></td>
                <!--<td>Editar</td>
                <td>Borrar</td>
                <td>Nova averia</td>
                <td>Nova venta</td>-->
            </tr>
            <?php	
				}
			?>
		</table>
	</taulaClients>
</body>
</html>

Es un poco liado, pero espero que me haya explicado bien. Muchas gracias!!
Adjunto una foto para que veais lo que es. Un saludo!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Ayuda con setInterval

Publicado por xve (1594 intervenciones) el 21/08/2014 09:45:53
Hola Jordi, para detener un setInterval() de javascript, tienes que asignarlo a una variable cuando lo defines, para posteriormente detenerlo con clearInterval()... algo así:

Para definir-lo, seria algo así:
1
var miInterval = setInterval(funcion, 10000);

Para detenerlo:
1
clearInterval(miInterval);

Te sirve esto?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jordi

Ayuda con setInterval

Publicado por Jordi (23 intervenciones) el 21/08/2014 11:34:17
Gracias xve, he provado lo que me dices pero siguo igual. No se si lo he hecho bien... Sigue actualizando la pagina cada 0.5 segundos aunque el texto no cambie...

Esta bien el codigo?

1
2
3
4
5
6
7
8
9
10
11
<script>
	var miInterval = setInterval(function() {
		$("taulaClients").load("contingut/buscador.php?palabra=" + $("#test").val());
	}, 500);
 
	$valorAnterior = $("#test").val();
 
	if($("#test").val() != $valorAnterior){
		clearInterval(miInterval);
	}
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jordi

Ayuda con setInterval

Publicado por Jordi (23 intervenciones) el 21/08/2014 12:09:40
Perdona me había equivocado, con el "!=" que era "==". Ahora lo he vuelto a probar pero tengo otro problema, que cuando escribo en el campo de texto no arranca el setInterval, y probé esto, pero tampoco.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
	var miInterval = setInterval(function() {
		$("taulaClients").load("contingut/buscador.php?palabra=" + $("#test").val());
	}, 500);
 
	$valorAnterior = $("#test").val();
 
	if($("#test").val() == $valorAnterior){
		clearInterval(miInterval);
	}
 
	if($("#test").val() != $valorAnterior){
		miInterval = setInterval(function() {
		$("taulaClients").load("contingut/buscador.php?palabra=" + $("#test").val());
	}, 500);
	}
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jordi

Ayuda con setInterval

Publicado por Jordi (23 intervenciones) el 21/08/2014 19:36:32
Ya lo he solucionado!

Lo he hecho así al final, por si a alguien le interesa. Gracias xve de todos modos!

1
2
3
4
5
6
7
8
9
<script>
	var currentSearch = null;
	setInterval(function() {
    	if(currentSearch != $("#test").val()) {
			$("taulaClients").load("contingut/buscador.php?palabra=" + $("#test").val());
			currentSearch = $("#test").val();
    	}
	}, 100);
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve

Ayuda con setInterval

Publicado por xve (1594 intervenciones) el 21/08/2014 22:42:50
Gracias por comentarlo y compartirlo Jordi!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar