Comment stopper un setInterval() ?

**lerieure** · 27/10/2012, 00h39

Bonjour à tous,

voici le mon code javascript :

Code js :

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
 
    function change() {
        var current = ($('div.background img.show') ? $('div.background img.show') : $('div.background img:first'));
        if (current.length == 0) current = $('div.background img:first');
        var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.background img:first') : current.next()) : $('div.background img:first'));
        next.css({ opacity: 0.0 })
        .addClass('show')
        .animate({ opacity: 1.0 }, 1000);
        current.animate({ opacity: 0.0 }, 1000)
        .removeClass('show');
    };
 
    $(document).ready(function () {
 
        var timer = null, interval = 5000;
 
        $("#stop").click(function () {
            alert("testW");
            clearInterval(timer);
            timer = null
        })
 
        $("#start").click(function () {
            $('div.background img').css({ opacity: 0.0 });
            $('div.background img:first').css({ opacity: 1.0 });
            if (timer !== null) return;
            timer = setInterval(function () {
                change();
            },
            interval);
        });
 
    });
 
</script>

comme vous pouvez le voir lorsque je clique sur le lien avec l'id start mon setinterval commence et lance la fonction change() qui change les images de mon background.
Lorsque je clique sur le lien avec l'id stop le changement d'image s'arrete. Ça marche nikel !

Seulement je veux que mon changement d'image ce fasse directement sans cliquer sur le lien avec l'id start

donc je rajoute le code suivant :

Code js :

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
 
    function thebackground( timer, interval) {
        $('div.background img').css({ opacity: 0.0 });
        $('div.background img:first').css({ opacity: 1.0 });
        if (timer !== null) return;
        timer = setInterval(function ()
        {
            change();
        },
        interval);
    }
 $(document).ready(function () {
          // code en haut
        thebackground(timer, interval);
        $('div.background').fadeIn(1000); // works for all the browsers other than IE
        $('div.background img').fadeIn(1000); // IE tweak
    });

Maintenant quand je clique sur le lien avec l'id stop, ça continue ...
Quelqu'un pourrait m'expliquer ce qui ne va pas ?

Merci d'avance !

**SpaceFrog** · 27/10/2012, 17h15

question de portée de la variable ...
elle doit être globale .

**lerieure** · 27/10/2012, 17h52

Code js :

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

1
2
 
var timer = null, interval = 5000;

Après vérification, elles sont en globales. Je ne fais pas de var timer ou var interval à l'intérieur de mes fonctions

EDIT : j'ai trouvé mon bonheur mais je ne comprend pourquoi ma première façon ne marchait pas ...

au lieu de faire ça :

Code js :

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

1
2
3
4
5
6
7
 
 $(document).ready(function () {
          // code en haut
        thebackground(timer, interval);
        $('div.background').fadeIn(1000); // works for all the browsers other than IE
        $('div.background img').fadeIn(1000); // IE tweak
    });

je fais :

Code js :

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

1
2
3
4
5
6
 
 $(document).ready(function () {
 
        $('div.background').fadeIn(1000); // works for all the browsers other than IE
        $('div.background img').fadeIn(1000); // IE tweak
    });

Code html :

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

1
2
 
 <body onload="javascript:thebackground();"> ...</body>

Du coup, quand je clique sur stop ça marche... Mais je ne comprend pas pourquoi le fais de déporter la fonction de $(document).ready
à changé quelque chose...
Est ce parce que mes variable devenait locale à $(document).ready ?
Qu'aurait il fallu que je fasse pour que ma fonction marche dans ce que je faisais au début ?

Comment stopper un setInterval() ?

jQuery

Discussions similaires

Partager

Partager