Necesito parar funcion ajax?

Juanjo87 · 2 Feb 2017

Hola, estoy teniendo un problema de hace algún tiempo que me trae loco..

Pues tengo una galería de imágenes, que al hacer click en una imagen, a través de ajax, traigo su contenido hasta un div. Hasta aquí todo bien, pero, si pincho en una imagen, y si antes que esta termine de cargar su contenido, pincho en otra, no se cancela la petición anterior y me hace algo extraño, me aparece el contenido de la primera imagen a la que hice click, y acto seguido me muestra el contenido de la segundo imagen que clickee.

¿Como puedo resolver esto? he intentando con .abort() pero no me funciono.

- - - Actualizado - - -

Esta es la función que se ejecuta al hacer click:

PHP:

<script>

function effect_hover(id){

var DivResponse = $("div.response_effect");
	
        DivResponse.html("<div class='uil-ring-css' style='transform:scale(0.37); margin-top: 200px;'><div></div></div>");

        jQuery.post(
		 MyAjax.url, 
		{
			'nonce' : MyAjax.nonce,
		    'action': 'hover_effect',
		    'post_id':   id,
		}, 
	
        function(response){			
       
               if(response)
               {
		    DivResponse.html(response);
               }
               else{
			
               }
       });
}
</script>

Este código llama a la función y se repite tantas veces como imágenes contenga la galería:

PHP:

<a class="licar_linck" data-title="<?php echo $post->post_title; ?>" data-id="<?php the_ID(); ?>" href="<?php the_permalink(); ?>"
	
	onclick="effect_hover('<?php echo $post->ID;?>','hover_effect','#effect_hover_box'); return false;"  
	
></a>

rau2191 · 2 Feb 2017

Prueba a utlizar el .done ya que la funcion de su interior solo se ejecutara cuando la peticion haya finalizado. Da la sensacion como si las dos funciones se concatenaran o algo similar >.<.
Prueba con esto

Insertar CODE, HTML o PHP:

       $.post( MyAjax.url,{
            'nonce' : MyAjax.nonce,
            'action': 'hover_effect',
            'post_id':   id,
        })
+	.done(function( response ) {
   	   if(response){
           	DivResponse.html(response);
            }
            else{
            
            }	
+	});

De todas formas si eso no te funciona lo que puedes hacer es analizar con un booleano a la entrada del metodo si se puede realizar la peticion ajax, si el booleano es falso pues que se salte la funcion ajax y punto. El true lo pones dentro de la funcion del .done. El booleano evidentemente tendra que ser una global o similar para que funcion la vea desde fuera.

sevilla666 · 2 Feb 2017

Pon en la función

Insertar CODE, HTML o PHP:

async=false

rau2191 · 3 Feb 2017

sevilla666 dijo:
Pon en la función

Insertar CODE, HTML o PHP:

async=false

Esa opcion esta ya deprecated. Si te fijas en la consola del navegador te lo dice continuamente xD.

Juanjo87 · 3 Feb 2017

pues acabo de probar lo que me comentas rau2191, pero no hace nada. se ejecuta = con el done que sin el y no me corrige el fallo

sevilla666 · 3 Feb 2017

Acabo de repasar mas detenidamente tu código.
Tu código esta mal.
--Creas una funcion con 1 parámetro: function effect_hover(id){

--Y la llamas con tres parámetros: onclick="effect_hover('<?php echo $post->ID;?>','hover_effect','#effect_hover_box');

Por otra parte pienso que rau2191 tiene razón async es "desanconsejada" y con .done deberia funcionar.

rau2191 · 3 Feb 2017

sevilla666 dijo:
Acabo de repasar mas detenidamente tu código.
Tu código esta mal.
--Creas una funcion con 1 parámetro: function effect_hover(id){

--Y la llamas con tres parámetros: onclick="effect_hover('<?php echo $post->ID;?>','hover_effect','#effect_hover_box');

Por otra parte pienso que rau2191 tiene razón async es "desanconsejada" y con .done deberia funcionar.

No me habia percatado yo sobre lo de los atributos xD. Teniendo en cuenta ese error, no deberia ni de estar entrando en la funcion:witless:

Juanjo87 · 3 Feb 2017

Vale, acabo de probarlo así

PHP:

onclick="effect_hover('<?php echo $post->ID;?>'); return false;

Funciona bien, pero me sigue pasando lo mismo.

rau2191 · 3 Feb 2017

Juanjo87 dijo:
Vale, acabo de probarlo así

PHP:

onclick="effect_hover(''); return false;

Funciona bien, pero me sigue pasando lo mismo.

Pues una idea que te doy para esto es utilizar la función .Off(). Con esta misma desactiva los eventos click en la imágenes y lo vuelves a activar con on() en .done(). Con esto te aseguras que la petición ajax ha terminado y que mientras tanto nadie ha podido hacer click.

Enviado desde mi Power mediante Tapatalk

Necesito parar funcion ajax?

Juanjo87

rau2191

sevilla666

rau2191

Juanjo87

sevilla666

rau2191

Juanjo87

rau2191

Temas similares