Stopper execution $.ajax() après un clic

WRInaute impliqué
Bonjour, cela fait un moment que je ne trouve pas la solution. En effet je souhaite pouvoir stopper l'execution d'un script ajax après un clic sur le body.

Voici le code pour le clic :

Code:
$('body').on('click', 'a.close, #fade', function(){
	 
	// COMMENT ARRETER LE CODE SUIVANT APRES LE CLIC ??
})

Code suivant à stopper après le clic :

Code:
$(document).ready(function() {

	$('#wait').fadeIn(500);
	$('#run').fadeOut(500, function(){

		var counter = 0;
		
		var looper = setInterval(function(){
			
			$.ajax({
url: '?mod=ssh_connect',
timeout: 10000,
error: function(){
					response = 'Connection error. Retry please';
				},
success: function(data){				
					counter++;
					
					$('#wait').html(counter).fadeIn(500);
					$('#run').html(data).fadeIn(500);
					
					if (counter >= 5)
					{
						    clearInterval(looper);
					}
				}
			});
			
		}, 10000);
	});	
	
	return false;
});

Merci
 
WRInaute impliqué
C'est pas très propre cette solution, c'est pas possible comme je le souhaite ?
 
WRInaute accro
sff a dit:
C'est pas très propre cette solution

Je vois pas bien ce qu'elle a de pas propre cette solution. Imaginons que l'utilisateur refresh sa page, ta solution n'empêchera pas que le script ajax se relance, la mienne si.
 
WRInaute impliqué
Si l'utilisateur rafraichi sa page, le script d'arrete forcement. Pas besoin d'un cookie
 
WRInaute impliqué
J'ai egalement essayé ca il y a une dizaine d'heure. Oui ca fait plus de dix heure que je cherche une solution !

Mais rien ne fonctionne, j'ai tout essayé. La seule chose qui arrete l'execution du script c'est un alert js et ce n'est pas ce que je veux. Voici le code avec le clearInterval Spoot :

Code:
$(document).ready(function() {
	
	$('body').on('click', 'a.close, #fade', function(){

 clearInterval(looper);

}),

	$('#wait').fadeIn(500);
	$('#run').fadeOut(500, function(){
		
		var looper = setInterval(function(){
			
			$.ajax({
url: '?mod=ssh_connect',
timeout: 10000,
error: function(){
					response = 'Connection error. Retry please';
				},
success: function(data){				
					counter++;
					
					$('#wait').html(counter).fadeIn(500);
					$('#run').html(data).fadeIn(500);
					
					if (counter >= 5)
					{
						    clearInterval(looper);
					}
				}
			});
			
		}, 10000);
	});	
	
	return false;
});
 
WRInaute impliqué
Dans le script sur le counter >= 5 le setinerval s'arrete. Donc j'ai justement eu l'idée de renseigner counter = 500 après le clic sur le body et comme tout le reste cela ne fonctionne pas

Voici le code :

Code:
$(document).ready(function() {
	
	$('#wait').fadeIn(500);
	$('#run').fadeOut(500, function(){

		var counter = 0;
		
		var looper = setInterval(function(){	
			
			$.ajax({
url: '?mod=ssh_connect',
timeout: 10000,
error: function(){
					response = 'Connection error. Retry please';
				},
success: function(data){				
					counter++;
					
					$('#wait').html(counter).fadeIn(500);
					$('#run').html(data).fadeIn(500);
					
					if (counter >= 5)
					{
						    clearInterval(looper);
					}
				}
			});
			
		}, 10000);
	});	
	
$('body').on('click', 'a.close, #fade', function(){
	
	counter = 500; // Ne fonctionne pas ! 
	
});

});
 
WRInaute impliqué
Cela ne fonctionne toujours pas. Voici le code :

Code:
$(document).ready(function() {
	
	$('#wait').fadeIn(500);
	$('#run').fadeOut(500, function(){

		var counter = 0;
		
		var looper = setInterval(function(){	
			
			$.ajax({
url: '?mod=ssh_connect',
timeout: 10000,
error: function(){
					response = 'Connection error. Retry please';
				},
success: function(data){				
					counter++;
					
					$('#wait').html(counter).fadeIn(500);
					$('#run').html(data).fadeIn(500);
					
					if (counter >= 5)
					{
						    clearInterval(looper);
					}
				}
			});
			
		}, 10000);
	});	
	
$('body').one('click', 'a.close, #fade', function(){
   
   counter = 500; // Ne fonctionne pas ! 
   
});

});
 
WRInaute discret
Quand tu crée une requête ajax, tu dois avoir un objet en retour, que tu peux arrêter avec abort().
Une fois ta requete créée, tu ajoute un évenement sur body pour détecter le clic et stopper l'objet.

En Javascript ça donne une truc comme ça :
Code:
function AjaxInit(aMethod, aUrl){
	var o = new XMLHttpRequest();
	// tu peux utiliser l'API Fetch si tu veux être moderne : https://developer.mozilla.org/fr/docs/Web/API/Fetch_API
	o.onreadystatechange = function(){
		if(o.readyState == 4){
			// la requete est terminée
		}
	}
	o.open(aMethod, aUrl, true);
	// tu excecute la requete
	o.send();
	// tu renvois l'object XMLHttpRequest
	return o;
}
// la fonction qui stoppe l'exécution
function AjaxStop(aObj){
	aObj.abort();
}
// initialise l'objet
var ajaxObj = AjaxInit("GET", "https://www.adressedusite.fr/fichier.php");
// ajoute un événement clic sur body
document.body.addEventListener("click", function(){ AjaxStop(ajaxObj); }, false);
Voilà l'idée générale.
 
Discussions similaires
Haut