Arrêter mon processus Ajax

Version imprimable

J'ai dans mon appli un processus ajax, qui tourne en boucle et doit d'arreter quand l'utilisateur clique sur un lien, voici le script ajax :

Code:

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
<script type="text/javascript">
    function displayCredit(price, mode, selection){
        $.ajax({
            type: "POST",
            url: decodeURI("<?= $this->basepath(); ?>/distribution/displaycredit"),
            data: {
                price : price,
                mode : mode,
                selection: selection
            },
            error: function(){
                return false;
            },
            success: function(retour){
                if(retour.selection != null){
                    if(retour.statut == 'ok' && retour.price != null && retour.mode != null){ /* Command ok */
                        getUrl('<?= $this->url('distribution/processing',array('selection'=>$selection,'receipt'=>$receipt)); ?>');
                    }
                }
 
                var old_value = $('#amout_credit_hidden').val();
                if(old_value != retour.credit){
                    $("#amout_credit").html(retour.credit);
                    $("#amout_credit_hidden").val(retour.credit);
                    $("#amout_credit_hidden").trigger('change');
                }
 
                setTimeout("displayCredit('"+retour.price+"','"+retour.mode+"','"+retour.selection+"')",<?= $timer; ?>);
                return true;
            }
        });
    }
</script>

Mon script est appelé sur ma page de cette façon :

Code:

1
2
3
4
5
6
7
<script type="text/javascript">
    $(document).ready(function() {
        var display = displayCredit(null,null,null);
 
       // stopEvent();
    });
</script>

J'ai essayé plein de trucs mais je n'arrive pas à arrêter ce fichu timeout au clic !

J'ai essayé avant mon return true :

Code:

1
2
3
4
5
6
7
8
 
$('.link').click(function() {
    clearTimeout(disCredit);
    return false;
});
 
var disCredit = setTimeout("displayCredit('"+retour.price+"','"+retour.mode+"','"+retour.selection+"')",<?= $timer; ?>);
 return true;

Mais rien n'y fait ... il continue de tourner !!!
Please help !

15/09/2014, 22h47
Lakhdr

Salut ,
Pour pas apporter beaucoup de modifs a ton code
la setTimeout et le click ne s activent pas au meme moment donc pour qu il partagent la meme variable faut la rendre globale
je dirais qu il faut declarer la variable disCredit comme globale .
dans ce cas le success d Ajax aura acces et le click aussi

en Plus rajoutes une variable canceled globale aussi et tu testes dans le (succes) avant l appel a setTimeout
puis dans le click tu mets cette variable a true . Cette variable te permettra de gerer le cas de déphasage entre le click et le setimeout

J'ai essayé ça :

Code:

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
<script type="text/javascript">
 
 
    function displayCredit(price, mode, selection){
        var cancelled = false;
 
        $('.link').click(function() {
            cancelled = true;
        });
 
        console.log(cancelled);
        $.ajax({
            type: "POST",
            url: decodeURI("<?= $this->basepath(); ?>/distribution/displaycredit"),
            data: {
                price : price,
                mode : mode,
                selection: selection
            },
            error: function(){
                return false;
            },
            success: function(retour){
                if(retour.selection != null){
                    if(retour.statut == 'ok' && retour.price != null && retour.mode != null){ /* Command ok */
                        getUrl('<?= $this->url('distribution/processing',array('selection'=>$selection,'receipt'=>$receipt)); ?>');
                    }
                }
 
                var old_value = $('#amout_credit_hidden').val();
                if(old_value != retour.credit){
                    $("#amout_credit").html(retour.credit);
                    $("#amout_credit_hidden").val(retour.credit);
                    $("#amout_credit_hidden").trigger('change');
                }
            }
        });
 
 
        return cancelled;
    }
 
    function exeDisplayCredit(price, mode, selection){
        var credit = displayCredit(price, mode, selection);
        //console.log(credit);
        if(credit == false){
            setTimeout('exeDisplayCredit('+price+','+mode+','+selection+')',2000);
        }
    }
</script>

mais il veut rien entendre, à aucun moment cancelled passe à true !!!!

je n'ai pas bien compris tout le déroulé
mais on ne peux intérompre un appel ajax
la seule chose qu'on peut faire c'est ignorer la réponse.

pour cela il suffit de mettere une fonction vide pour traiter la réponse.

Code:

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
jqXHR = $.ajax({
            type: "POST",
            url: decodeURI("<?= $this->basepath(); ?>/distribution/displaycredit"),
            data: {
                price : price,
                mode : mode,
                selection: selection
            }).error(function(){
                return false;
            }).done(function(retour){//attention .sucess est déprécié
                if(retour.selection != null){
                    if(retour.statut == 'ok' && retour.price != null && retour.mode != null){ /* Command ok */
                        getUrl('<?= $this->url('distribution/processing',array('selection'=>$selection,'receipt'=>$receipt)); ?>');
                    }
                }
 
                var old_value = $('#amout_credit_hidden').val();
                if(old_value != retour.credit){
                    $("#amout_credit").html(retour.credit);
                    $("#amout_credit_hidden").val(retour.credit);
                    $("#amout_credit_hidden").trigger('change');
                }
            });
 
//si la réponse n'est pas arrivée dans les 2 secondes ignorer la réponse
setTimeout(function() {
   jqXHR.done(function(){});
}, 2000);

une petite note au passage il est plus efficace de mettre ton code js dans un fichier js

Code:

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
calldisplaycredit = function(url) {
jqXHR = $.ajax({
            type: "POST",
            url: decodeURI(url),
            data: {
                price : price,
                mode : mode,
                selection: selection
            }).error(function(){
                return false;
            }).done(function(retour){//attention .sucess est déprécié
                if(retour.selection != null){
                    if(retour.statut == 'ok' && retour.price != null && retour.mode != null){ /* Command ok */
                        getUrl('<?= $this->url('distribution/processing',array('selection'=>$selection,'receipt'=>$receipt)); ?>');
                    }
                }
 
                var old_value = $('#amout_credit_hidden').val();
                if(old_value != retour.credit){
                    $("#amout_credit").html(retour.credit);
                    $("#amout_credit_hidden").val(retour.credit);
                    $("#amout_credit_hidden").trigger('change');
                }
            });
 
//si la réponse n'est pas arrivée dans les 2 secondes ignorer la réponse
setTimeout(function() {
   jqXHR.done(function(){});
}, 2000);
}

et dans ton html

Code:

calldisplaycredit("<?= $this->basepath(); ?>/distribution/displaycredit");

ainsi le fichier js étant statique sera mis en cache chez le client il poura être compilé par Javascript
et en cas d'erreur tu aura une repère avec numéro de line sur.

A+JYT

16/09/2014, 15h05
SylvainPV

On ne peut pas arrêter un appel AJAX, tout comme on ne peut pas reprendre une lettre à la poste une fois qu'elle est expédiée.
16/09/2014, 19h02
ABCIWEB

Citation:

On ne peut pas arrêter un appel AJAX, tout comme on ne peut pas reprendre une lettre à la poste une fois qu'elle est expédiée.

@sekaijin
@SylvainPV

Je comprend pas trop votre réponse. Et la méthode abort() elle sert à quoi ?
16/09/2014, 19h25
sekaijin

elle n'interrompe pas l'appel ajax juste le traitement de la réponse
16/09/2014, 22h43
Lakhdr

Salut gekkette13 !

On c est pas compris !!,

Gardes ton code comme dans ta preimere version et déclare ta variable disCredit comme grlobale et ca ira mieux !

En suite pour bien faire les chose tu rajoutera la variable canceled .

le probleme est d'arreter la reccurence et non pas l appel Ajax

Citation:

Envoyé par sekaijin

...abort n'interromp pas l'appel ajax juste le traitement de la réponse

Je comprends toujours pas mieux. J'ai bien l'impression de pouvoir tout interrompre à n'importe quel moment avec ces scripts (y compris le traitement php pour peu qu'on lui demande de vérifier le status).

Code:

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<?php
session_start();
print_r($_SESSION);
$_SESSION = array();
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Document sans titre</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function()
{
    var arret_utilisateur = false;
 
    function Arret (xhr)
    {
	if(arret_utilisateur == true)
	{
	    xhr.abort();
	}
 
	$('#stop').off("click");
	$('#stop').one("click",function() 
	{
	    arret_utilisateur = true;
	    xhr.abort();
	})
    }
 
    function Ajax(){
      $.ajax({
            type: "POST",
            url: "test_ajax.php",
 
	    beforeSend: function (xhr) 
	    {
		Arret (xhr);
	    },
            error: function(xhr, textStatus, errorThrown)
            {
		// pour distinguer un arrêt utilisateur par rapport à une erreur serveur par exemple
		if(textStatus == 'abort'){$('#reponse').append(' arrêt utilisateur ')} else {$('#reponse').append(errorThrown)}
 
		$('#depart').one("click",function() 
		{
		    arret_utilisateur = false;
		    Ajax();
		})
 
                return false;
            },
            success: function(retour)
            {
		$("#reponse").append(retour);
 
                setTimeout(function(){Ajax();}, 2000);
            }
        });
    }
 
    $('#depart').one("click",function() 
    {
	Ajax();
     })
});
</script>
</head>
 
<body>
<p><span id="depart" style="cursor:pointer;color:green">departAjax</span>  <span id="stop" style="cursor:pointer;color:red">stopAjax</span></p>
<p>status : <span id="reponse"></span></p>
</body>
</html>

Ce script appelle "test_ajax.php" en ajax. Si on clique sur le lien "departAjax" et que l'on clique sur "stopAjax" peu de temps après (moins de 20 secondes puisque le script php fait un sleep de 10*2 secondes), on arrête bien le script de même que le traitement php ce que confirme la valeur de la variable de session qui s'affiche quand on rafraîchi la page (et aussi les log apache).

@gekkette13 tu peux t'inspirer de ce script pour ton problème. Evidemment le code devra être adapté (surtout côté php) car il n'est certainement pas besoin d'interrompre le script côté serveur en cas d'annulation de la requête ajax (la boucle ajax s'arrêtera néanmoins).

page test_ajax.php :

Code:

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
54
55
56
<?php
header('Content-type: text/html; charset=UTF-8');
session_start();
$_SESSION['ajax'] = isset($_SESSION['ajax']) ? $_SESSION['ajax'] : 0;
 
 
/*
 * La sortie qui aura lieu dans le log d'erreurs Apache
 * 
 * [Wed Sep 17 02:08:49.170696 2014] [:error] [pid 5200:tid 1896] [client 127.0.0.1:51152] Traitement de la connection interrompue apres 5 boucles, referer: http://127.0.0.1/abciweb/abort-ajax-dev-com.php
 *  
 */
 
/*
 * On n'autorise pas le script à continuer si l'utilisateur l'interrompt
 * Pour autant, toute fonction enregistrée par un register_shutdown_function
 * sera quand même appelée
 * 
 */
ignore_user_abort(false);
 
$i = 0;
function end_script() {
	global $i;
	//si la conenction est en status ABORT
	switch (connection_status()) {
		case 1:
			error_log("Traitement de la connection interrompue apres $i boucles");
			break;
		case 2:
			error_log("Traitement du timeout du script");
			break;
	}
}
//on enregistre la fonction
register_shutdown_function("end_script");
 
for ($i=0; $i<10; $i++) {
	//temporisation
	sleep(2);
	$_SESSION['ajax'] += 1;
 
	//Il faut envoyer des données vers le client pour que PHP 
	//détecte un changement d'état de connexion
	//Attention à ce que par défaut output_buffering ne soit pas sur 'on'
	echo ("\n");
	/*vide le tampon de sortie (à tester car ob_flush() peut être aussi utile,
	notamment selon la plate-forme (Windows, Unix...)*/
	ob_flush();
	flush();
}
 
 
echo(" Envoi normal des donnees après 20 secondes ");
 
?>

Javascript ne peux pas agir sur le serveur autrement q'en faisant une requête HTTP

un appel ajax fonction ainsi

Code:

1
2
3
4
5
6
7
8
client                                      serveur
Ajax.send()-------------------------------->
                                            déclenchement du script php
                                            traitement de la demande
                                            constitution de la réponse
<-------------------------------------------envoi de la réponse
réception de la réponse
traitement de la réponse.

toi tu veux faire

Code:

1
2
3
4
5
client                                      serveur
Ajax.send()-------------------------------->
                                            déclenchement du script php
 abort------------------------------------->traitement de la demande
                                            arrêt du traitement

mais javascript ne peux pas agir sur le traitement en cours sur le serveur
la seul chose que tu peux faire c'est

Code:

1
2
3
4
5
6
7
8
client                                      serveur
Ajax.send()-------------------------------->
                                            déclenchement du script php
 abort                                      traitement de la demande
                                            constitution de la réponse
<-------------------------------------------envoi de la réponse
réception de la réponse
ne rien faire

A+JYT

17/09/2014, 12h14
devyan

Bonjour gekkette,

Pour ton problème, qui d'après ce que j'ai vu de ton code correspond à "interrompre une boucle d'appels AJAX" il suffit de ne pas faire le redéclenchement (le setTimeout) une fois que l'utilisateur a demandé l'arrêt.

C'est ce que Lakhdr disait en parlant de mettre disCredit en variable globale.
;)

Citation:
Envoyé par sekaijin
toi tu veux faire
Code:

1 2 3 4 5 client serveur Ajax.send()--------------------------------> déclenchement du script php abort------------------------------------->traitement de la demande arrêt du traitement
Salut,

Bah non, ce n'est pas ce que je voulais faire initialement car ce n'est pas le sujet de ce topic : il s'agissait uniquement d'interrompre la boucle ajax créée avec le setTimeout. J'ai donné une solution dans mon précédent message mais on peut aussi faire une condition sur le setTimeout comme l'ont indiqués devyan et Lakhdr.

Ensuite, autre problème (qui n'intéresse que nous ici), concernant précisément le fait d'interrompre le traitement serveur en cours, j'ai trouvé un exemple à partir de ce post qui permet apparemment de le faire en demandant à php de détecter un changement d'état de la connexion. D'où mon script côté serveur nommé "test_ajax.php" dans mon exemple plus haut. Alors effectivement je n'ai pas testé en production, mais d'après mes premiers tests (j'ai donné les deux scripts complets, je peux pas faire mieux y'a plus qu'à tester), j'observe que ça fonctionne.
Donc ma question est : as-tu testé mon exemple avant de répondre, et si oui merci de préciser ta réponse car il m'est difficile de comprendre ce qui ne marche pas qaund je fais des tests qui eux fonctionnent :?

17/09/2014, 15h24
gekkette13

J'ai revu mon code, le souci ne se pose plus. Thanks.
17/09/2014, 15h34
sekaijin

Oops

tu voulais intérompre le timeout pas Ajax

là le sujet n'était pas clair du tout
A+JYT