Discussion :

[gekkette13]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[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

[gekkette13]

J'ai essayé ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !!!!

[sekaijin]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.

[ABCIWEB]

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 ?

[sekaijin]

elle n'interrompe pas l'appel ajax juste le traitement de la réponse

[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

[ABCIWEB]

...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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ");
 
?>

[sekaijin]

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

un appel ajax fonction ainsi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.

[ABCIWEB]

toi tu veux faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[gekkette13]

J'ai revu mon code, le souci ne se pose plus. Thanks.

[sekaijin]

Oops

tu voulais intérompre le timeout pas Ajax

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