Compteur de temps

[Arcy]

Euh ... bonjour.

Je me rends compte qu'avec mes problèmes, j'anime tout seul cette rubrique

Bref, j'ai un site contenant des boutons, ces boutons modifiant la valeur d'un input à coté quand on appuie dessus.

Sachant que ça risque d'être utilisé sur tablette, je cherche quelque chose de plus simple à offrir à l'utilisateur que d'appuyer 50 fois sur le bouton.

Mon idée était donc d'utiliser "onkeydown" afin d'augmenter l'incrémentation rapide.

Pour faire simple, quelque chose du genre :

tempsAttente = 1000 (en ms)fonction Temps(){     for (i = 0; stop != true; i++)     {          afficher "i"          attendre(tempsAttente)                    (on divise par 2 à chaque fois le temps d'attente)          if ((i = 5) OU (i = 10) OU (i = 20))          {               tempsAttente = tempsAttente / 2;          }}

Le but ici est que l'incrémentation se fait de plus en plus vite tant qu'on reste appuyé sur le bouton.

Ainsi, on passera de 0 à 5 en 5 secondes, de 5 à 10 en 2,5s et de 10 à 20 en 1,25s

Une idée ?

[Cronycs]

Hello,

Il faut savoir qu'il n'y a pas de fonction "wait" en javascript ce qui rend ce que tu veux faire compliqué. J'avais fait un script que tu pourrais p-e adapter à ton besoin. J'ai une barre défilante avec un bouton à coté, lorsque l'utilisateur clic une seule fois, la barre ne bouge que d'un cran, si l'utilisateur reste appuyé sur le bouton plus de 300ms alors la barre défilante continue à bouger vers les crans suivants.

Voici le code avec les commentaires qui vont bien :

<input type="button" value="+" onmousedown="attente('moreDistance()')"  onmouseup="mouseU()">

Là c'est mon bouton qui fait appel à une fonction "d'attente" sur l'action onmousedown. Je lui passe en argument le nom de la fonction auquel elle devra faire appel. Onmouseup fait appel à une fonction dont on verra l'utilité plus tard.

function attente(f){
  setTimeout(f,1);
  timeout = setTimeout("mouseD('"+f+"')",300);
}

La fonction attente fait appel à la fonction passée en paramètre avec un délai de 1ms. Donc instantanément en gros, ce qui correspond à un clic de l'utilisateur.

Ensuite, elle fait appel à la fonction "mouseD()" au bout de 300ms. La fonction "mouseD()" va gérer le fait que l'utilisateur reste appuyer sur le bouton.

function mouseD(f){
    int = setInterval(f, 50);
}

La fonction "mouseD()" va lancer la fonction passée en paramètre à un intervalle de 50ms, donc toutes les 50ms c'est comme si l'utilisateur appuyait à nouveau sur le bouton. Je pense que c'est ici que tu peux gérer le temps qui passe en décrémentant cet intervalle selon le nombre d’occurrence de int. Au début tu mets un intervalle de 1000ms, que tu divises par 2, etc.

Dernière fonction très importante, il faut arrêter ce processus si l'utilisateur arrête d'appuyer sur le bouton :

function mouseU(){
  clearTimeout(timeout);
  clearInterval(int);  
}

C'est le rôle de la fonction "mouseU()" que j'appelle sur l'action onmouseup.

Voilà, je ne sais pas si c'est la meilleure manière de faire, mais c'est la seule que j'avais trouvée :)

[Arcy]

Effectivement, ça pourrait être ce que je recherche.

J'ai trouvé de la doc ici : http://devdocs.io/dom/window.settimeout

[Arcy]

Je viens d'essayer, j'y arrive pas

Tu peux m'envoyer le script que tu avais utilisé ? Parce que je comprend pas comment la fonction peut tourner en boucle tant qu'on reste appuyé en fait ...

[Cronycs]

En fait je t'ai déjà mis la plupart du code utilisé, le seule truc que je n'ai pas mis c'est le contenu de la fonction "moreDistance()" qui me sert à modifier ma barre de défilement.

J'arrive à faire tourner cette fonction en boucle grâce à la fonction setInterval.

[Arcy]

Mais dans ce cas, à quoi sert "timeout" ici, puisque sa valeur n'est jamais récupérée ?

function attente(f){  setTimeout(f,1);  timeout = setTimeout("mouseD('"+f+"')",300);}

[Cronycs]

En fait c'est parce que j'avais besoin d'une action en deux temps :

- premier temps 'setTimeout(f,1);' : je lance ma fonction quand l'utilisateur appuie sur le bouton. En fait ici j'aurai pu mettre l'appel à ma fonction directement, je ne sais pas pourquoi j'ai mis ça. (je vais corriger d'ailleurs)

- deuxièeme temps : timeout = setTimeout("mouseD('"+f+"')",300); : je lance la fonction qui va lancer le setInterval au bout d'un certain temps (ici 300ms) car je considère que s'il a gardé le bouton appuyer au delà de ce temps, il souhaite continuer l'action.

[Arcy]

Oki, je tente cette après-midi.

[Arcy]

Re !

Bon je viens d'essayer, ça marche pas :(

<button class="btn btnInventaire" onmousedown="attenteMoinsStock('stockMini-<?PHP echo $ID; ?>')">-</button>        <input type="text" class="champSaisie" id="stockActu-<?PHP echo $ID; ?>" value="<?PHP echo $ligneInv -> stockActuel; ?>"/><button class="btn btnInventaire" onmousedown="attentePlusStock('stockMini-<?PHP echo $ID; ?>')">+</button>

function MoinsStock(nomChamp)    {        var valeur = document.getElementById(nomChamp).value;        if (valeur > 0)        {            valeur--;            document.getElementById(nomChamp).value = valeur;         }        else        {            document.getElementById(nomChamp).value = 0;        }    }    function attenteMoinsStock(f){        setTimeout(MoinsStock(f),1);        timeout = setTimeout("mouseD('"+MoinsStock(f)+"')",300);    }    function mouseD(f){        int = setInterval(f, 50);    }    function mouseU(){        clearTimeout(timeout);        clearInterval(int);      }

Quand je cliques sur le "-", ça décrémente de 2 en 2 et à chaque appuie uniquement ...

Explications : j'envoie l'ID du champ à attenteMoinsStock

Cet ID est renvoyé à MoinsStock, qui s'occupe de décrémenter la valeur dans le champ jusqu'à 0.

[Arcy]

J'ai fait une petite fonction qui affiche "temps" dans la console mais la boucle tourne jusqu'à 40 000 et c'est tout, sans prendre en compte le temps entre deux intervalles (donc 2s, puis 4, 8, ...).

    function attenteMoinsStock(f){                for (var temps = 2000; temps < 40000 ; temps *= 2)        {            console.log(temps);                        timeout = setTimeout(temps);        }            }

[Arcy]

Bon, j'ai trouvé mais ça me pose un GROS problème :

function attenteMoinsStock(){
var temps = 1000;

console.log(temps);

int = setInterval(MoinsStock, temps + 1000);
timeout = setTimeout(stopChrono, 10000);
}

Pour le coup, le contenu de mon input est bien décrémenté toutes les secondes.

Problème, je peux plus envoyer l'ID de l'input à décrémenter, mettre "MoinsStock()" décrémentant une fois, sans que la valeur temporelle soit prise en compte.

[Arcy]

ENFIN \o/

    function attenteMoinsStock(nomChamp, temps){        var seuil = 2000;        var tempsMini = 60;                if (temps < tempsMini)        {            temps = tempsMini;        }        int = setInterval(function() { MoinsStock(nomChamp); }, temps);        timeout = setTimeout(function() { stopChrono(); attenteMoinsStock(nomChamp, parseInt(temps * 0.3)); }, seuil);    }    function stopChrono(){        clearTimeout(timeout);        clearInterval(int);      }

Voilà comment j'ai fait (et ça a été dur pour comprendre comment fonctionnent setInterval et setTimeout puisque le script continu s'il y a quelque chose après eux) :

On envoie (dans le code HTML) le champ concerné par la décrémentation (c'est le cas ici) a une fonction dédiée à la décrémentation (obligatoire dans mon cas puisque j'envoie un argument).

La décrémentation a lieu tout les x millisecondes (défini dans l'appel de la fonction. Pour l'exemple, j'avais mis 400).

Dés que le seuil pour changer la vitesse est atteinte (2 secondes, soit 5 décrémentations de 400 ms), je refais appel à la fonction en indiquant un temps inférieur :

parseInt permet donc de faire le calcul "temps en entrée × 0,3" et la renvoie dans l'appel.

Même chose que le paragraphe précédent, avec un temps moindre.

Pour que le décompte soit "lisible" et permette de réagir rapidement, j'ai limité la descente à 60 ms (d'où le if() au début).