Optimisation d'un bout de code
Amstramgram
Bonjour alors voila j'ai ce code qui remplie et vide une jauge circulaire HTML5 mais voila le truc c'est que si j'executer le cycle remplissage/vidage plus de deux fois le remplissage n'est pas fluide. Comment optimiser ou corriger ce code?
Pour voir le probleme je vous invite a vous rendre la -> julienmiclo.fr
function __Circle(){
/* Arc skills */
$('input.round').wrap('<div class="round" />').each(function(){
var $input = $(this);
var $div = $input.parent();
var min = $input.data('min');
var max = $input.data('max');
var color = $input.data('color');
$color = $('<canvas width="200" height="200"/>');
$circle = $('<canvas width="200" height="200"/>');
$div.append($circle);
var ctx = $circle[0].getContext('2d');
var ratio = ($input.val() - min) / (max-min);
ctx.beginPath();
ctx.arc(100,100,90, -1/2*Math.PI, ratio*2*Math.PI - 1/2 * Math.PI);
ctx.lineWidth = 20;
ctx.strokeStyle = "#"+color;
ctx.shadowOffsetX = 2;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0,0,0,0.1)";
ctx.stroke();
});
};
__Circle();
var h = 82, w = 76, j = 57, p = 33;
var count = false;
/* Declencheur Scroll */
$(document).scroll( function(){
if($(this).scrollTop() > 300){
$('#floo .right').stop().animate({'right': '-10px'},700);
$('#floo .left').stop().animate({'left': '0'},500);
}
if($(this).scrollTop() < 300){
$('#floo .right').stop().animate({'right': '-250px'},700);
$('#floo .left').stop().animate({'left': '-280'},500);
}
if($(this).scrollTop() > 580 && !count){
__JaugeLoad();
}
if($(this).scrollTop() < 580 && count){
__JaugeDownload();
}
});
function __JaugeLoad(){
var timer, cpt= 0, cptw= 0, cptj= 0, cptp= 0;
for(var i=0; i<=h; i++){
setTimeout(function() {
$('.html').val(cpt++);
__Circle();
count = true;
console.log(cpt);
}, 30 * i, i) ;
};
for(var i=0; i<=w; i++){
setTimeout(function() {
$('.wordpress').val(cptw++);
}, 30 * i, i) ;
};
for(var i=0; i<=j; i++){
setTimeout(function() {
$('.jquery').val(cptj++);
}, 30 * i, i) ;
};
for(var i=0; i<=p; i++){
setTimeout(function() {
$('.php').val(cptp++);
}, 30 * i, i) ;
};
};
function __JaugeDownload(){
var timer, cpt= 82, cptw= 76, cptj= 57, cptp= 33;
for(var i=82; i>=0; i--){
setTimeout(function() {
$('.html').val(cpt--);
__Circle();
count = false;
console.log(cpt);
}, 30 * i, i) ;
};
for(var i=76; i>=0; i--){
setTimeout(function() {
$('.wordpress').val(cptw--);
}, 30 * i, i) ;
};
for(var i=57; i>=0; i--){
setTimeout(function() {
$('.jquery').val(cptj--);
}, 30 * i, i) ;
};
for(var i=33; i>=0; i--){
setTimeout(function() {
$('.php').val(cptp--);
}, 30 * i, i) ;
};
};Voila il y a tout.
Merci beaucoup a ceux qui prendrons le temps de jeter un coup d'oeil.
3 réponses
<html>
<head>
<title>Jauges</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
function jauges_init(){
$('input.round').each(function(){
var $input = $(this).hide();
if (!$input.parent().is('.round')) $input.wrap('<div class="round" />');
$input.val(0);
var $div = $input.parent();
$div.append($('<span/>').addClass('title').html($input.data('text')));
$div.append($('<span/>').addClass('value').html('0%'));
$color = $('<canvas width="200" height="200"/>');
$circle = $('<canvas width="200" height="200"/>');
$div.append($circle);
});
}
function jauge_draw(input){
var container = input.parent();
var value_span = container.find('span.value');
var canvas = container.find('canvas');
var ctx = canvas[0].getContext('2d');
var min = input.data('min');
var max = input.data('max');
var value = input.val();
var color = input.data('color');
var ratio = (value - min) / (max - min);
value_span.text(value + '%');
ctx.beginPath();
ctx.clearRect(0, 0, 200, 200);
ctx.arc(100,100,90, -1/2*Math.PI, ratio*2*Math.PI - 1/2 * Math.PI);
ctx.lineWidth = 20;
ctx.strokeStyle = "#"+color;
ctx.shadowOffsetX = 2;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0,0,0,0.1)";
ctx.stroke();
}
function jauges(mode){
$('input.round').each(function(){
var input = $(this);
var value = input.data('value');
var real_value = input.val();
if (mode === 'load'){
if (real_value < value){
jauge_incr(input);
}
} else if (mode === 'unload'){
if (real_value > 0){
jauge_decr(input);
}
}
});
}
function jauge_incr(input){
var value = parseInt(input.val()) + 1;
if (value > input.data('value')) value = input.data('value');
input.val(value);
jauge_draw(input);
if (input.val() < input.data('value'))
setTimeout(function(){ jauge_incr(input) }, 10);
}
function jauge_decr(input){
var value = parseInt(input.val()) - 1;
if (value < 0) value = 0;
input.val(value);
jauge_draw(input);
if (input.val() > 0)
setTimeout(function(){ jauge_decr(input) }, 10);
}
jauges_init();
jauges('load');
$('#load').click(function(){ jauges('load'); });
$('#unload').click(function(){ jauges('unload'); });
});
</script>
<style type="text/css">
body { font-family: Helvetica; font-weight: bold; }
body>div { width: 960px; margin: 0 auto; }
div.round { float: left; margin: 20px; position: relative; }
div.round span.title { position: absolute; top: 110px; left: 0; width: 200px; text-align: center; }
div.round span.value { position: absolute; top: 80px; left: 0; width: 200px; text-align: center; }
</style>
</head>
<body>
<div>
<div style="text-align: center;">
<button id="load">Load</button>
<button id="unload">Unload</button>
</div>
<input type="text" class="round" value="0" data-value="82" data-min="0" data-max="100" data-color="000" data-text="HTML/CSS">
<input type="text" class="round" value="0" data-value="76" data-min="0" data-max="100" data-color="111" data-text="Wordpress">
<input type="text" class="round" value="0" data-value="57" data-min="0" data-max="100" data-color="222" data-text="jQuery">
<input type="text" class="round" value="0" data-value="33" data-min="0" data-max="100" data-color="333" data-text="PHP/MySQL">
</div>
</body>
</html>