Discussion :

[jux]

Bonjour je développe une interface qui nécessite de récupérer des données pour générer un fichier excel.
L'utilisateur doit pouvoir stopper à tout moment la récupération des données.

Cette partie comporte un bouton Générer XLS, un bouton STOP et une barre de progression.
Pour éviter les timeout j'utilise un $.each qui appelle un webservice et je souhaite que le bouton STOP arrête le $.each.

Mon code simplifié :

Code html :

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

1
2
3
4
5
<button class="btn btn-success" style="float:left; margin-right:1px" onclick="getxls()">Générer le fichier XLS</button>
<button class="btn btn-danger" id="button_stop" style="float:left; margin-right:3px;" onclick="stop()" >Stop</button>
<div class="progress progress-striped" style="display:none" id="progress">
	<div class="bar" id="bar"></div>
</div>

Code 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
var stop_clicked=false;
function getxls(){
  $( "#progress" ).show();
  $.each(array, function( index, value) {
	if(stop_clicked){
		return false;
	}
	data[]=appelWS(value);
	$( "#bar" ).width(getvalueprogressbar(nb_total, index)+'%');
  });
  xls_generate(data);
}
function stop(){
    alert('stop_clicked');
    stop_clicked= true;
}

Le problème est que pendant que le each s'exécute, le bouton stop ne réagit pas (les autres boutons aussi), sauf quand le each est terminé
J'ai essayé plusieurs trucs mais j'ai toujours le même problème de blocage de l'interface ...

[Bovino]

Une boucle est traitée de façon séquentielle. Donc tant qu'elle s'exécute, elle ne rend pas la main au reste du script.
Bref, tu ne peux pas stopper la boucle à l'aide d'une action utilisateur.

Pour éviter les timeout

C'est dommage : c'est le seul moyen pour rendre la main pendant l'exécution du code !

Code :

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

data[]=appelWS(value);

Tu ne confondrais pas avec la syntaxe PHP là ?

[jux]

oui pardon pour le

data[]=appelWS(value);

c'est différent dans le code d'origine

Sinon j'ai trouvé une piste pour mon problème :
http://jsfiddle.net/zP3gT/

Je teste demain. Merci.