[AJAX] retarder le déclenchement d'évenements

**matt7575** · 25/11/2008, 00h51

Bonjour à tous,

j'aurais besoin d'être aiguillé afin de réaliser un petit script.

j'utilise la librairie de scriptaculous.

mon code ici :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>news2.0</title>
<?php
 
 $nbfeuille=8;
$nomfeuille[]="exemple.css";
$nomfeuille[]="exemple1.css";
$nomfeuille[]="exemple2.css";
$nomfeuille[]="exemple3.css";
$nomfeuille[]="exemple4.css";
$nomfeuille[]="exemple5.css";
$nomfeuille[]="exemple6.css";
$nomfeuille[]="exemple7.css";
$nomfeuille[]="exemple8.css";
$feuille=rand(0,$nbfeuille);
 
?>
<link href="<?php echo $nomfeuille[$feuille] ?>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/prototype.js"></
script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript">
 
function PulsateEffect(element){
       new Effect.Pulsate(element, {duration:5, pulses:50});
 
     }
 
      function ShakeEffect(element){
       new Effect.Shake(element, {duration:5, pulses:50});
   }
</script>
 
</head>
 
<body>
 
 
        <p>
  <a href="#" onclick="new Effect.BlindDown('flux1', 1)">BlindDown</a> |
  <a href="#" onclick="new Effect.BlindUp('flux1', 1)">BlindUp</a> |
  <a href="#" onclick="new Effect.Highlight('flux1', 1)">Highlight</a> |
  <a href="#" onclick="new Effect.Grow('flux1', 1)">Grow</a> |
  <a href="#" onclick="new Effect.Shrink('flux1', 1)">Shrink</a> |
  <a href="#" onclick="new Effect.Squish('flux1ext', 1)">Squish</a> |
  <a href="#" onclick="new Effect.SwitchOff('flux1', 1)">SwitchOff</a> |
  <a href="#" onclick="ShakeEffect('flux1')">Shake</a> |
  <a href="#" onclick="PulsateEffect('flux1','mytext2')">Pulsate</a> |
  <a href="#" onclick="new Effect.Fold('flux1', 1)">Fold</a> |
  <a href="#" onclick="new Effect.DropOut('flux1', 1)">DropOut</a> |
  <input type="button" value="Reset" onclick="new Effect.Appear('flux1', 1)" />
</p>
 
 
 
    <div id="flux1">
 
mon texte ici
 
</div>
 
 
</body>
</html>

ce que je souhaite faire, à terme, ce serait de déclencher les événement AJAX (shake, pulsate, hilight ...) a différent moment et de manière aléatoire.

par exemple: à l'instant t, mon texte est normal. A l'instant t+30s, l'effet shake secoue mon texte. A l'instant t+50s, l'effet pulsate fait clignotter mon texte.

Cela vous semble t'il réalisable. Avez-vous des pistes ou tutoriaux à me proposer dans ce sens.

Merci à vous (déjà pour m'avoir lu, et pour les réponses éventuelles

**Bovino** · 25/11/2008, 08h45

Tout d'abord :

déclencher les événement AJAX (shake, pulsate, hilight ...)

ces effets de scriptaculous n'ont rien à voir avec Ajax (pas de communication avec le serveur...)

Ensuite, oui ce que tu souhaites est possible avec un setTimeout ou setInterval où tu définis le paramètre de temporisation de façon aléatoire...

**matt7575** · 25/11/2008, 10h23

Bonjour,

Oui effectivement, ce n'est pas de l'AJAX, mais du js.
Merci pour ta réponse. je me penche sur setTimeout et setInterval. Je ferais peut-être appel à vous si besoin.

Merci encore

**matt7575** · 25/11/2008, 11h15

Désolé de vous ennuyer,
J'imagine que cela doit semblé enfantin pour vous,

J'ai utilisé setTimeout. Voici mon code que j'ai simplifié :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>news2.0</title>
 
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="lib/scriptaculous.js"></script>
<script type="text/javascript">
 
 function lancePulsate()
{
  timeoutID = window.setTimeout(PulsateEffect('flux1'), 20000);
 
}
 
 
function PulsateEffect(element){
       new Effect.Pulsate(element, {duration:5, pulses:50});
 
     }
 
 
</script>
 
 
 
</head>
 
<body>
 
 
        <p>
 
  <a href="#" onclick="lancePulsate();">Pulsate</a> |
 
  <input type="button" value="Reset" onclick="new Effect.Appear('flux1', 1)" />
</p>
 
 
 
    <div id="flux1">
 
mon texte ici
 
</div>
 
 
</body>
</html>

sur le clique du lien Pulsate, la fonction se lance correctement (l'effet pulsate est déclenché), mais le délai n'est pas respecté.
Peut-être que je me trompe, mais de ce que j'ai compris l'effet devrait théoriquement se lancer après 20000 milliseconde, hors il se lance immédiatement.

Voyez-vous où j'ai pu faire une erreur?

Meci

**DoubleU** · 25/11/2008, 12h11

Code :

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

timeoutID = window.setTimeout(PulsateEffect('flux1'), 20000);

La fonction setTimeout attend en premier paramètre une fonction qu'elle appelera quand le delai aura expiré. Hors, en écrivant PulsateEffect('flux1'), tu ne passes pas la référence de la fonction mais tu l'appelles, donc elle se lance tout de suite, c'est normal.
Il faut donc que tu passes par une fonction intermediaire, par exemple comme ca:

Code :

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

timeoutID = window.setTimeout(function(){PulsateEffect('flux1')}, 20000);

**matt7575** · 25/11/2008, 14h59

Merci beaucoup

Effectivement ca fonctionne, merci pour l'explication, c'est beaucoup plus claire pour moi

[AJAX] retarder le déclenchement d'évenements

AJAX

Vue hybride

Discussions similaires

Partager

Partager