SetInterval Javascript accélération
Poplio
-
woooooooow -
woooooooow -
Bonjour,
je suis entrain de faire un menu déroulant géré avec un setInverval.
Le menu fonctionne bien, lorsqu'il est enroulé et qu'on click sur un button, il se déroule progressivement.
A l'inverse, quand il est déroulé et qu'on click sur le button, il s'enroule.
La première fois que je l'enroule/déroule tout fonctionne bien.
Par contre lorsque que je veux le faire plusieurs fois de suite, le déroulement/enroulement progressif devient de plus en plus rapide.
Y a t-il moyen de régler ça ?
Je précise qu'une fois enroulé ou déroulé je fais un ClearInterval.
je suis entrain de faire un menu déroulant géré avec un setInverval.
Le menu fonctionne bien, lorsqu'il est enroulé et qu'on click sur un button, il se déroule progressivement.
A l'inverse, quand il est déroulé et qu'on click sur le button, il s'enroule.
La première fois que je l'enroule/déroule tout fonctionne bien.
Par contre lorsque que je veux le faire plusieurs fois de suite, le déroulement/enroulement progressif devient de plus en plus rapide.
Y a t-il moyen de régler ça ?
Je précise qu'une fois enroulé ou déroulé je fais un ClearInterval.
A voir également:
- SetInterval Javascript accélération
- Planification de processeur graphique à accélération matérielle - Guide
- Telecharger javascript - Télécharger - Langages
- Emule acceleration patch - Télécharger - Téléchargement & Transfert
- A javascript error occurred in the main process - Forum Handicap / Accessibilté
- Cet effet requiert une accélération gpu - Forum Windows 10
4 réponses
Pour ceux qui voudraient mon code :
<html>
<head>
<link href="screen.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function play(){
var obj = document.getElementById('header');
var hAct = obj.style.width;
var regex = /px/;
var chaine = hAct;
var resultat = chaine.split(regex);
var newWidth = resultat[0];
newWidth = parseInt(newWidth);
switch(newWidth){
case 20: deroule(newWidth); //enroulé
break;
case 500: enroule(newWidth); //déroulé
break;
default:break;
}
}
function deroule(width){
newWidth = width + 10;
if(newWidth <= 500){
document.getElementById('header').style.width = newWidth;
var timer = setInterval('deroule(newWidth);', 40);
}
else{
clearInterval(timer);
newWidth = 500;
}
}
function enroule(width){
newWidth1 = width - 10;
if(newWidth1 >= 20){
document.getElementById('header').style.width = newWidth1;
var timer = setInterval('enroule(newWidth1);', 40);
}
else{
clearInterval(timer);
newWidth1 = 20;
}
}
var etat;
</script>
</head>
<body>
<div id="header" style="width:20px;"> </div>
<input type="button" onclick="javascript:play();">
</body>
</html>
<html>
<head>
<link href="screen.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function play(){
var obj = document.getElementById('header');
var hAct = obj.style.width;
var regex = /px/;
var chaine = hAct;
var resultat = chaine.split(regex);
var newWidth = resultat[0];
newWidth = parseInt(newWidth);
switch(newWidth){
case 20: deroule(newWidth); //enroulé
break;
case 500: enroule(newWidth); //déroulé
break;
default:break;
}
}
function deroule(width){
newWidth = width + 10;
if(newWidth <= 500){
document.getElementById('header').style.width = newWidth;
var timer = setInterval('deroule(newWidth);', 40);
}
else{
clearInterval(timer);
newWidth = 500;
}
}
function enroule(width){
newWidth1 = width - 10;
if(newWidth1 >= 20){
document.getElementById('header').style.width = newWidth1;
var timer = setInterval('enroule(newWidth1);', 40);
}
else{
clearInterval(timer);
newWidth1 = 20;
}
}
var etat;
</script>
</head>
<body>
<div id="header" style="width:20px;"> </div>
<input type="button" onclick="javascript:play();">
</body>
</html>
Un peut tard mais bon ;)
SetInterval permet de definir un unterval aussi si tu l'appelle plusieurs fois tu auras plusieurs intervals qui s'éxécuterons toutes les Xms, aussi tu devrais plutôt utiliser setTimeout() ou ne fait qu'un seul setInterval
SetInterval permet de definir un unterval aussi si tu l'appelle plusieurs fois tu auras plusieurs intervals qui s'éxécuterons toutes les Xms, aussi tu devrais plutôt utiliser setTimeout() ou ne fait qu'un seul setInterval
Essai ceci ... j'espere que ça vous aide ^_^!
<html>
<head>
<script>
function play(){
newWidth = document.getElementById('header').offsetWidth;
if( newWidth <= 22 ) deroule(newWidth); //enroulé
else if( newWidth >= 488 ) enroule(newWidth); //déroulé
}
function deroule(width){
var header = document.getElementById('header');
for(var i = width ; i<=500 ; i++){
setTimeout("header.style.width = '"+i+"px';", i);
}
}
function enroule(width){
var header = document.getElementById('header');
var t=0;
for(var i = width ; i>=20 ; i--){
setTimeout("header.style.width = '"+i+"px';", t);
t++;
}
}
</script>
</head>
<body>
<div id="header" style="width:20px; border:solid thin black"> </div>
<input type="button" onclick="play();">
</body>
</html>
