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

Version imprimable

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:

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

25/11/2008, 08h45
Bovino

Tout d'abord :

Citation:

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

:nono: 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...
25/11/2008, 10h23
matt7575

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

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:

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

25/11/2008, 12h11
DoubleU

Code:

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:

timeoutID = window.setTimeout(function(){PulsateEffect('flux1')}, 20000);
25/11/2008, 14h59
matt7575

Merci beaucoup :)

Effectivement ca fonctionne, merci pour l'explication, c'est beaucoup plus claire pour moi ;)
25/11/2008, 15h15
matt7575

je me demandais s'il n'y a pas une possibilité d'utiliser les variables effect.startOn et effect.finishOn plutôt que setTimeout ?

Merci !!

Combien de forum ai-je parcouru !?
Combien de solutions ai-je essayé !?
Code:

1 2 3 4 5 6 7 8 9 function lateLoad(){ $.ajax({ (...), timeout: 1000; // doesn't work beforeSend: function(){setTimeout(myFunction, 1000);}, // doesn't work (...) }); } setTimeout(lateLoad(), 1000); // doesn't work
mais

Code:

setTimeout(function(){lateLoad();}, 1000); // IT WORKS !!!

many thanks guys ! at long last =)

24/11/2011, 15h58
Bovino

Code:

setTimeout(lateLoad, 1000);

Fonctionne aussi bien ;)