Comment arrêter une fonction javascript dans une autre fonction?

Je suis l'élaboration d'un diaporama simple du système.
J'ai le diaporama enveloppé dans un div caché, ce qui est indiqué lorsqu'une miniature de la galerie est cliqué.

Le diaporama fonctionne grâce à une fonction appelée commence(), qui est exécuté lorsque le jeu clique sur le bouton.

Au moment où je l'ai mis de cacher à tout div de nouveau lors de l'arrêt est cliqué, mais je tiens à garder le div montré, tout simplement arrêter le diaporama, en d'autres termes, arrêter le commence() fonction.

Quelqu'un peut me dire comment faire cela?

Voici mon JS:

function commence() {
hidden = document.getElementById("hidden");
hidden.style.display = 'block';
pause = document.getElementById("pause");
pause.style.display = 'block';
play = document.getElementById("play");
play.style.display = 'none';
pic = document.getElementById("picbox"); //Assign var pic to the html element.
imgs = []; //Assign images as values and indexes to imgs array.
/* --------------------------- IMAGE URLS FOR IMGS ARRAY -------------------------*/
imgs[0] = "/snakelane/assets/images/thumb/_1.jpg";  imgs[10] = "/snakelane/assets/images/thumb/_19.jpg"; 
imgs[1] = "/snakelane/assets/images/thumb/_2.jpg";  imgs[11] = "/snakelane/assets/images/thumb/_20.jpg"; 
imgs[2] = "/snakelane/assets/images/thumb/_3.jpg";  imgs[12] = "/snakelane/assets/images/thumb/_21.jpg";
imgs[3] = "/snakelane/assets/images/thumb/_4.jpg";  imgs[13] = "/snakelane/assets/images/thumb/_22.jpg";
imgs[4] = "/snakelane/assets/images/thumb/_5.jpg";  imgs[14] = "/snakelane/assets/images/thumb/_23.jpg";    
imgs[5] = "/snakelane/assets/images/thumb/_6.jpg";  imgs[15] = "/snakelane/assets/images/thumb/_24.jpg";
imgs[6] = "/snakelane/assets/images/thumb/_7.jpg";  imgs[16] = "/snakelane/assets/images/thumb/_25.jpg";
imgs[7] = "/snakelane/assets/images/thumb/_8.jpg";  imgs[17] = "/snakelane/assets/images/thumb/_26.jpg"; 
imgs[8] = "/snakelane/assets/images/thumb/_9.jpg";  imgs[18] = "/snakelane/assets/images/thumb/_27.jpg";
imgs[9] = "/snakelane/assets/images/thumb/_10.jpg"; imgs[19] = "/snakelane/assets/images/thumb/_28.jpg"; 
/* -----------------------------------------------------------------------------------------------------*/
var preload = []; //New array to hold the 'new' images.
for(i = 0 ; i < imgs.length; i++) //Loop through imgs array
{
preload[i] = new Image(); //Loop preload array and declare current index as a new image object.
preload[i].src = imgs[i]; //Fill preload array with the images being looped from ims array.
}
i = 0; //Reset counter to 0.
rotate(); //Execute rotate function to create slideshow effect.
}
//Function to perform change between pictures.
function rotate() {
pic.src = imgs[i]; //Change html element source to looping images
(i === (imgs.length -1))?(i=0) : (i++); //counter equals imgs array length -1.
setTimeout( rotate, 4000); //Sets the time between picture changes. (5000 milliseconds).
}
function init() {
[].forEach.call(document.querySelectorAll('.pic'), function(el) { 
el.addEventListener('click', changeSource); 
});
function changeSource() {  
hidden = document.getElementById("hidden");
hidden.style.display = 'block';
newpic = this.src; 
var pic = document.getElementById("picbox");
pic.src = newpic;
}
}
document.addEventListener("DOMContentLoaded", init, false);
function stopSlide() {
var hidden = document.getElementById("hidden");
hidden.style.visibility = 'hidden';
pause.style.display = 'none';
var play = document.getElementById("play");
play.style.display = 'block';
}

La pause et play déclarations ne sont pas pertinentes à ma question, ils sont tout simplement cacher le bouton de lecture et de montrer le bouton de pause si le diaporama est en cours d'exécution, et vice versa.

Utiliser un return déclaration
Ressemble à ce que vous avez besoin de s'arrêter est la setTimeout dans rotate.
Merci! comment dois-je faire? puis-je interrompre le délai d'attente avec une instruction dans le stopSlide() la fonction?
En fait, à chaque fois rotate s'exécute, un nouvel appel est prévue (via setTimeout). Donc, vous avez juste besoin d'un if pour décider de l'opportunité de prévoir un nouvel appel ou non. Je ne sais pas ce que la condition doit être, cependant.

OriginalL'auteur | 2013-08-08

Il me semble que vous avez réellement envie d'arrêter la rotation() de la fonction, plutôt que de commencer, puisque la rotation est ce qui est en train de changer les images (c'est à dire exécuter le diaporama).

Il existe deux façons. La première, comme thriqon posté, est d'utiliser le clearTimeout fonction. Cependant, je recommanderais de faire comme ceci:

//somewhere in global space
var rotateTimeout;
//in commence
rotateTimeout = window.setInterval(rotate,4000); //this will tell the browser to call rotate every 4 seconds, saving the ID of the interval into rotateTimeout
//in stopSlide
window.clearInterval(rotateTimeout); //this will tell the browser to clear, or stop running, the interval.

La deuxième, qui est un peu messier, est d'utiliser une sentinelle.

//somewhere in global space
var running;
//in commence
running = true;
rotate();
//in stopSlide
running = false;
//in rotate
if (running) {
setTimeout(rotate,4000);
}

OriginalL'auteur

1

Vous souhaitez utiliser window.clearTimeout l'aide de l'id que vous obtenez en appel window.setTimeout.

Mais vous devriez également envisager de passer à window.setInterval, qui vous donne un appel de fonction toutes les 4 secondes (et non pas 4 secondes après le dernier appel), pas besoin de les appels répétés à la re-définir le délai d'attente et une meilleure gestion des événements manqués.

Voir ce jsFiddle: http://jsfiddle.net/D3kMG/ pour un exemple sur la façon d'utiliser ces fonctions pour un simple compteur.

Une petite annotation: Ce type de code n'est pas multithread-sûr! Si plusieurs threads ont été actifs dans le même temps, il peut arriver de perdre le signal d'arrêt. Mais normalement, JS dans le navigateur est un thread à la fois.

OriginalL'auteur thriqon
0

Comme mentionné par @thriqon vous souhaitez utiliser window.clearTimeout. Pour ce faire, vous devez enregistrer un "global" en référence à l'id retourné par window.setTimeout, comme suit:
```
var timeoutID;
//... function declarations
function rotate() {
//...
timeoutID = setTimeout( rotate, 4000);
}
```
Puis dans votre stopSlide fonction, vous n'aurez tout simplement appeler clearTimout( timeoutID ) pour arrêter la rotation.

OriginalL'auteur SimonR

Vous devez vous connecter pour publier un commentaire.