Appeler une fois de plus une fonction() sur un temps donné

Version imprimable

16/01/2013, 08h32
Tendhor57

Appeler une fois de plus une fonction() sur un temps donné
Bonjour,

Je sais que mon titre n'est pas très explicite mais pour faire court voici en gros ce que je souhaiterais faire:

J'ai créé une fonction qu'on va apeller draw() et je souhaiterais que celle-ci s'execute une fois au bout de 10 secondes, 2 fois au bout de 20 secondes, 3 fois au bout de 30 secondes,...

bref je penses que vous avez compris.

Hors deux contraintes a cela le:
- setInterval() est déjà utiliser pour cette même fonction

- Je veut éviter de devoir faire quelque chose de ce genre là:
Code:

1 2 3 4 5 6 7 8 if(time==60){ draw(); draw(); draw(); draw(); draw(); draw(); }
Car si je fais cela au total je devrais écrire + de 100 fois cette fonction dans mon code et ca fait pas jolie. :nono:

Si quelqu'un à une idée je suis preneur

:alerte: Petite note qui peu peut être être un frein dans ma demande: ma fonction et une fonction paramétré :alerte:
16/01/2013, 08h33
SpaceFrog

setInterval()...
avec une boucle et un incrément...
16/01/2013, 08h51
Tendhor57

Citation:

Envoyé par SpaceFrog

setInterval()...
avec une boucle et un incrément...

C'est ce que je pensais faire, seul soucis le setInterval() est à proscrire dans mon cas car le code js et fonction déjà créer est tellement dense que ce serais trop complexe de gérer un setInterval() de plus
16/01/2013, 08h54
SpaceFrog

il ne te reste plus que le setTimout()

il n'y a pas d'autre façon de faire de la récurrence échelonnée dans le temps.
16/01/2013, 08h55
Bovino

J'avoue que je ne comprends vraiment pas ce que tu cherches à faire... :?
En tout cas, je doute qu'appeler plusieurs fois la même fonction soit la meilleure solution...

Citation:

Envoyé par Bovino

J'avoue que je ne comprends vraiment pas ce que tu cherches à faire... :?
En tout cas, je doute qu'appeler plusieurs fois la même fonction soit la meilleure solution...

Ben en faite je souhaite creer un "carousel" d'images avec des effets de celle-ci a chaque apparition d'une nouvelle images (en gros un genre de diaporama style power point mais avec que des images).

Pour réaliser ses effets d'images j'ai créer la fonction suivante:
Code:

1 2 3 4 5 6 7 8 9 10 11 function draw(X,Y,L,H){ url="images/"; canvas = document.getElementById("papier"); ctx = canvas.getContext("2d"); img = new Image(); img.src = url+"image-slider-1.jpg"; img.onload = function(){ ctx.drawImage(document.getElementById("cachee"), X, Y, L, H, X, Y, L, H) } }
Cette fonction va faire apparaitre par morceau (sous forme de carrés ou rectangle) une images caché dans une balise <canvas>

Hors si l'on apelle la fonction draw() en y précisant les paramètres cela va créer qu'un seul petit carré ou rectangle.

Hors au premier lancement un petit carré de petite taille doit apparaitre puis au bout d'un certain temps 2 petit carrés doivent apparaitre (faisant ainsi apparaitre petit à petit l'image en entier) et donc au début je fait un carré, puis 2, puis 3,...

Hors comme la fonction draw() dessine que un petit carré ben faut que je l'apelle ensuite 2 fois, puis 3fois,...

Voilà j'espère que ceci est plus clair et que vous pourrez me donner quelque pistes en attendant j'ai peut trouver une piste, que je vais tester je vous tiens informer

Comme ce que tu voulais faire me paraissait un exercice intéressant, j'ai pris un instant pour le faire. Enfin d'après ce que j'ai compris. Le résultat n'est surement pas parfait, mais c'est une base intéressante à améliorer.

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
 
<canvas id="mycanvas">
</canvas>
 
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
 
var SQUARE_SIZE = 50;
 
var img = new Image();
img.onload = function() { 
   canvas.width = img.width;
   canvas.height = img.height;
   drawSquare(current_pos);
}
img.src = "snailbait.png";
 
var stop = false;
var current_pos = {
   x: 0,
   y: 0,
   increment: function() {
      if (this.x * SQUARE_SIZE > img.width) {
         this.x = 0;
         this.y = this.y + 1;
      }
      else {
         this.x = this.x + 1;
      }
      if (this.y * SQUARE_SIZE > img.height) {
         return true;
      }
      else {
         return false;
      }   
   },
   getX: function() {
      return this.x * SQUARE_SIZE;
   },
   getY: function() {
      return this.y * SQUARE_SIZE;
   }
};
 
var drawSquare = function(pos) {
   context.drawImage(
      img,
      current_pos.getX(),
      current_pos.getY(),
      SQUARE_SIZE,
      SQUARE_SIZE,
      current_pos.getX(),
      current_pos.getY(),
      SQUARE_SIZE,
      SQUARE_SIZE);
   stop = current_pos.increment();
 
   if (!stop) {
      setTimeout(function() {drawSquare(current_pos)}, 1000);
   }
}