Discussion :

[Tendhor57]

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 :

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

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.

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

Petite note qui peu peut être être un frein dans ma demande: ma fonction et une fonction paramétré

[SpaceFrog]

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

[Tendhor57]

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

[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.

[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...

[Tendhor57]

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 :

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

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

[MaitreKaio]

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 :

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
 
<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);
   }
}