execution de code en différé

**trent94** · 20/02/2012, 13h36

Bonjour,
J'ai un petit souci pas évident à formuler.
Il s'agit d'exécuter du code après le chargement d'une page web, et lorsque le code s'exécute après et est assez long, il ne faudrait pas qu'il bloque l'utilisateur, qu'il soit en arrière plan en quelque sorte.

J'ai réduit mon problème à 3 tableaux à remplir.

Le premier se remplit au chargement de la page, et les deux autres (qui seraient cachés dans mon problème) se rempliraient idéalement après le chargement mais sans bloquer l'utilisateur qui doit pouvoir manipuler le premier tableau (ascenseur du div le contenant pour en examiner le contenu par exemple) sans être bloqué durant le chargement des deux autres.

Je ne sais pas si c'est clair mais voilà le code -certes peu rigoureux - :

Dans ce code, je charge en body.onload le premier tableau, j'attends 5 secondes pendant lesquelles je peux manipuler l'ascenseur du premier tableau, puis les deux autres se chargent mais -aïe- ça bloque alors la manipulation du premier.

Si vous pouviez éclairer ma lanterne...

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
 
 
 
<html>
<head>
<script language="javascript" type="text/javascript" >
//////////////////////////////
function reste()
//////////////////////////////
{
oTab = document.getElementById("tab2");
	for(var i=0;i<600;i++)
	{
	  oRow=oTab.insertRow();
	  oCell=oRow.insertCell();
	  oCell.innerHTML="<table><tr><td>2</td></tr></table><table><tr><td>2</td></tr></table><table><tr><td>2</td></tr></table>";
	  oCell=oRow.insertCell();
	  oCell.innerHTML="<table><tr><td>2</td></tr></table><table><tr><td>2</td></tr></table><table><tr><td>2</td></tr></table>";
	  oCell=oRow.insertCell();
	  oCell.innerHTML="<table><tr><td>2</td></tr></table><table><tr><td>2</td></tr></table><table><tr><td>2</td></tr></table>";
	  oCell=oRow.insertCell();
	  oCell.innerHTML="<table><tr><td>2</td></tr></table><table><tr><td>2</td></tr></table><table><tr><td>2</td></tr></table>";
	  oCell=oRow.insertCell();
	  oCell.innerHTML="<table><tr><td>2</td></tr></table><table><tr><td>2</td></tr></table><table><tr><td>2</td></tr></table>";
	}
	oTab = document.getElementById("tab3");
	for(var i=0;i<600;i++)
	{
	  oRow=oTab.insertRow();
	  oCell=oRow.insertCell();
	  oCell.innerHTML="<table><tr><td>3</td></tr></table><table><tr><td>3</td></tr></table><table><tr><td>3</td></tr></table>";
	  oCell=oRow.insertCell();
	  oCell.innerHTML="<table><tr><td>3</td></tr></table><table><tr><td>3</td></tr></table><table><tr><td>3</td></tr></table>";
	  oCell=oRow.insertCell();
	  oCell.innerHTML="<table><tr><td>3</td></tr></table><table><tr><td>3</td></tr></table><table><tr><td>3</td></tr></table>";
	  oCell=oRow.insertCell();
	  oCell.innerHTML="<table><tr><td>3</td></tr></table><table><tr><td>3</td></tr></table><table><tr><td>3</td></tr></table>";
	  oCell=oRow.insertCell();
	  oCell.innerHTML="<table><tr><td>3</td></tr></table><table><tr><td>3</td></tr></table><table><tr><td>3</td></tr></table>";
	}
};
//////////////////////////////
function init()
//////////////////////////////
{
  oTab = document.getElementById("tab1");
	for(var i=0;i<600;i++)
	{
	  oRow=oTab.insertRow();
	  oCell=oRow.insertCell();
	  oCell.innerHTML="<table><tr><td>1</td></tr></table><table><tr><td>1</td></tr></table><table><tr><td>1</td></tr></table>";
	  oCell=oRow.insertCell();
	  oCell.innerHTML="<table><tr><td>1</td></tr></table><table><tr><td>1</td></tr></table><table><tr><td>1</td></tr></table>";
	  oCell=oRow.insertCell();
	  oCell.innerHTML="<table><tr><td>1</td></tr></table><table><tr><td>1</td></tr></table><table><tr><td>1</td></tr></table>";
	  oCell=oRow.insertCell();
	  oCell.innerHTML="<table><tr><td>1</td></tr></table><table><tr><td>1</td></tr></table><table><tr><td>1</td></tr></table>";
	  oCell=oRow.insertCell();
	  oCell.innerHTML="<table><tr><td>1</td></tr></table><table><tr><td>1</td></tr></table><table><tr><td>1</td></tr></table>";
	}
	setTimeout("reste()",5000);
};
</script>
</head>
<body onload="init()">
  <div style="height:300px;overflow:scroll"><table border="1" id="tab1"></table></div>
 
  <div style="height:300px;overflow:scroll;"><table border="1" id="tab2"></table></div>
 
  <div style="height:300px;overflow:scroll;"><table border="1" id="tab3"></table></div>
 
 
</body>
</html>

**SpaceFrog** · 20/02/2012, 13h38

jette un oeil par là http://www.developpez.net/forums/d47...us-rapidement/

**trent94** · 20/02/2012, 14h15

Merci, cela peut être une piste :
du fait d'accélérer drastiquement la création des tableaux, l'accès à la page sera libéré rapidement.

Cela dit, je ne sais pas si ce que je demandais est possible.
De lancer la génération d'un tableau pendant que la pages est utilisée.

execution de code en différé

JavaScript

Discussions similaires

Partager

Partager