Afficher un div pendant un traitement client javascript

**predalpha** · 14/10/2008, 14h57

Bonjour à tous,

je me galère depuis des heures pour essayer d'afficher un div contenant une image lors d'un traitement javascript qui peut durer plusieurs secondes.

Ce traitement jscript permet de récupérer un tableau html afin de lui fixer ses entetes. Il redessine ainsi le tableau avec des scrolls. Il est executé coté client sur le click d'un bouton.
Malheureusement selon la taille initiale de ce tableau la fonction peut durer un certain temps.

Alors pendant ce temps je veux afficher mon div avec une image indiquant de patienter.

Au niveau du code, je suis arrivé à un certain résultat :

Code :

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

1
2
3
4
document.getElementById("waitDiv").style.display="block";
mafonctiondetraitementjscript();
document.getElementById("waitDiv").style.display="none";

Le problème c'est que je ne vois rien. Ma page se freeze jusqu'à l'affichage finale de mon tableau. Alors j'ai mis un alert('coucou'); après ma première ligne de code pour voir ce qui se passe et mon div s'affiche bien mais l'image gif qu'il contient reste figé.

Je me demande ce que je peux faire. On dirait qu'il faudrait que j'execute la lourde fonction javascript en asynchrone, est-ce possible?
Voyez-vous d'autres solutions ?

**SpaceFrog** · 14/10/2008, 15h12

il faut passer par une variable flag (témoin)

et une boucle setInterval qui vient tester regulièrement cette variable ...

au debut du traitement tu mets la vairable = false
en fin de traitemetn tu le remets à true

la boucle setInterval vient tester ce flag et modifie ce que tu veux quand il redevient true

**predalpha** · 14/10/2008, 15h36

arf j'ai testé mais cela ne fonctionne pas. Je fais peut-etre erreur au niveau de mon code. mon timer lance des intervals uniquement dès que ma lourde fonction à laissé la main.

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
function test(content)
{
var boli = false;
var t1 = setInterval("displayz("+boli+")",1000);
CreateScrollHeader(content,true,true,40,200,boli);
clearInterval(t1);
}
function displayz(b)
{
if (b=true)
{
alert("affiche");
}
else
{
alert("masque");
}
}

Ce que je recherche, 'j'ai l'impression serait presque du multithread.

**E.Bzz** · 14/10/2008, 15h48

Bonjour,
pour éviter ce problème, as-tu essayé de lancer CreateScrollHeader() par un setTimeout() (de 1ms, par exemple).
Ca devrait éviter d'attendre que ta fonction rende la main, justement ...

A+

**SpaceFrog** · 14/10/2008, 16h04

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
<html>
<head>
<script type="text/javascript">
<!--
var flag=false;
var runCheck;
 
function traitement(){
    for(i=0;i<100;i++){
 
    if(i==99){flag=true;}
 
    }
 
}
 
function checkFlag(){
if(flag){clearInterval(runCheck)
document.getElementById('mire').style.display='none'
 
}
 
}
 
function Launch(){
document.getElementById('mire').style.display="block";
 
traitement()
runCheck=setInterval(function(){checkFlag()},1000)
 
}
//-->
</script>
</head>
<body>
<div id="mire" style='display:none'> Traitement en cours ... </div>
<input type='button' value="go" onclick="Launch()" style="width:300px">
</body>
</script>

**predalpha** · 14/10/2008, 16h40

Merci pour vos conseils Spacefrog et E.bzz.
Un mix de vos deux solutions m'ont au moins permis d'afficher l'image pendant l'execution de mon traitement.

C'est déjà pas mal. Ci-dessous voici le code :

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
var bolus=true;
var runCheck;
function test(content)
{
document.getElementById('img_wait').style.display='block';
setTimeout(function(){CreateScrollHeader(content,true,true,40,200)});
runCheck=setInterval(function(){displayz()},1000);
}
function displayz()
{
if(bolus){
clearInterval(runCheck)
document.getElementById('img_wait').style.display='none';
}
}

Mais j'ai toujours le soucis suivant. L'image censée faire patienter est un gif animé , qui ne l'est pas pendant le traitement.
Si vous avez des conseils ? En tout cas merci pour votre aide qui m'a permis d'avancer.

Afficher un div pendant un traitement client javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager