Faire qu'un setInterval lance la première instance immédiatement

Bonjour,

j'ai un code approximativement comme celui-ci:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

setInterval(horloge, 1000);

function horloge(){
        unix_timestamp = unix_timestamp+1;
        console.log(unix_timestamp);
        var date = new Date(unix_timestamp*1000);
        var hours = date.getHours();
        var minutes = "0" + date.getMinutes();
        var seconds = "0" + date.getSeconds();

        var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
        $('.horloge').html(formattedTime);

        trace("horloge");
    }

Le problème c'est que l'heure met 1 sec a arriver sur la page, alors j'ai tenté de mettre horloge(); avant le setInterval, mais le setInterval ne fonctionne plus ensuite…

Mon but serait de garder cette fonction, dans le pire des cas j'en referai une pour le premier affichage.

Merci, WinXaito

Es-tu sûr ?

Hum étrange, est-ce parce que je le fais dans une requête ajax ? Le code complet:

 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

    $.ajax({
        url : '/models/ajax.php',
        method : 'POST',
        data : 'base=true',
        dataType : 'json',

        success : function(result, statut){
            if(result.firstConnection == 'true')
                firstConnection();

            window.unix_timestamp = result.time.timestamp;
            //horloge()  --> Pose problème avec le setInterval() si je le met
            setInterval(horloge, 1000);
        },
        error : function(result, statut, error){
            alert("Error, please contact an administrator");
        }
    });

    function horloge(){
        unix_timestamp = unix_timestamp+1;
        console.log(unix_timestamp);
        var date = new Date(unix_timestamp*1000);
        var hours = date.getHours();
        var minutes = "0" + date.getMinutes();
        var seconds = "0" + date.getSeconds();

        var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
        $('.horloge').html(formattedTime);

        trace("horloge");
    }

au pire tu appelles la fonction puis tu appelles setinterval

1
2

horloge();
setInterval(horloge, 1000);

C'est bien ce que je voulais faire, mais le setInterval est bloqué et l'heure ne bouge pas …

J'ai tenté de faire une fonction appelé par ajax comme ceci: Mais le résultat est pareil.

1
2
3
4

   function startHorloge(){
        horloge();
        setInterval(horloge, 1000);
    }

Et si tu fais un bête console.log dans ta fonction horloge, pour voir si ça provient de son contenu ?

J'ai déjà un "console.log(unix_timestamp)", il ne m'affiche que le premier appeler par la fonction .. Ensuite c'est comme si le setInterval est ignoré.

Merci viki, ça marche à la perfection

PS : en plus de fonctionner c'est généralement une bonne pratique. Ca évite d'empiler les timers dans le cas où la fonction prend du temps à s'exécuter.

Par contre attention, ton horloge va "dériver" du temps d'exécution de la fonction.

(ce que j'entends par là c'est que la fonction horloge(), au lieu d'être exécutée toutes les secondes, sera exécutée toutes les (1 seconde + temps d'exécution de la fonction horloge)

Oui je comprend, après c'est juste pour avoir une indication sur l'heure (Car mon PC se dérègle tout seul, je vous dis pas la galère … mais j'ai eu beau déjà ouvrir des topics aucune solutions).

Donc même si j'ai un décalage de quelques secondes voir minutes au bout de long moment ce n'est pas un soucis. (Surtout que je dois déjà avoir une bonne seconde de décalage pour la requête ajax)

Une bonne astuce pour lancer un traitement asynchrone immédiatement est le setTimeout(truc, 0) ou setTimeout(truc, 1). C'est souvent bien pratique.