Nombres animés (demi-compte à rebours) avec JQuery?

Question

J'essaie de créer une valeur numérique, disons 5000, puis de changer rapidement pour une autre valeur, disons 4000, à l'aide de JQuery. En ce moment, je le fais bien en utilisant:

mod(".class",4000,"add");

function mod(id,value,type){
    var numb = $(id).html();
    var current_value = parseInt(numb);
    do {
        if(type == "add")
            increment(id);
        else
            decrement(id);
        current_value = parseInt(numb);
    }while(current_value != value);

    function decrement(id){
        $(id).html(current_value-1);
    }

    function increment(id){
        $(id).html(current_value+1);
    }
}

Je sais que ce n'est probablement pas la meilleure façon de s'y prendre, mais ce dont j'ai besoin, c'est qu'il compte à rebours (ou plus) très rapidement les nombres, de la valeur actuelle à la valeur définie. Ce que je souhaitais avec cette méthode était d’avoir un délai avec setInterval ou setTimeout, mais le script tout entier échouait plutôt mal.

Tous les conseils sont appréciés, mais je préférerais ne pas utiliser de gros plugins pour cette tâche apparemment simple.

Answer 1

Lorsque j'ai exécuté le code que vous avez fourni, j'ai été pris dans une boucle infinie. À la fin de la boucle, vous avez

current_value = parseInt (numb);

mais la valeur de numb n'est définie qu'au début de la fonction, elle est donc indéfinie. Si vous changez cela en

valeur_actuelle = parseInt ($ (id) .html ());

alors cela fonctionne bien. Sauf que cela semble se produire instantanément.

J'ai piraté une méthode pour réaliser l'animation en utilisant des délais d'attente qui semble fonctionner assez bien, mais comme je suis encore relativement nouveau en javascript, je ne sais pas s'il existe une approche plus efficace ou non. Il suffit de modifier le deuxième paramètre passé à setTimeout pour obtenir la vitesse souhaitée. Et si vous souhaitez modifier la valeur d’incrément / décrément, modifiez simplement la décélération de dir .

function mod2(id, value) {
    var numb = $(id).html();
    var current_value = parseInt(numb);

    // determine direction to go
    var dir = 1;
    if (current_value - value > 0) {
        dir *= -1;
    }
    getThere(id, current_value, value, dir);
}

function getThere(id, current_value, target_value, dir) {
    current_value += dir;
    $(id).html(current_value);
    if (current_value != target_value) {
        setTimeout("getThere('"+id+"',"+current_value+","+target_value+","+dir+")", 10);
    }
}

Answer 2

Ce que vous faites ici est de mettre à jour le DOM plusieurs fois de suite et rapidement. En conséquence, le navigateur attendra que vous ayez effectué toutes vos modifications et seulement à ce moment-là il redessinera la page. Ainsi, vous ne constaterez aucun changement visuel tant que le nombre ne sera pas réduit à 4000.

Oui, vous devez utiliser un setTimeout ou un setInterval / clearInterval . Ou bien, pour plus de clarté du code, vous pouvez utiliser le jQuery " wait " plugin :

// (code to get new value goes here)

$('.class').wait(100, function(){
    $(this).text(newValue);
});

Au lieu de html () , j'ai utilisé text () , car il semble qu'il ne soit nécessaire de modifier aucune structure HTML.

Answer 3

J'aime l’approche de thorn avec setTimeout, mais je la condenserais en deux fonctions et la lancerait après le chargement de la fenêtre pour que la page soit chargée avant la mise à jour du compteur:

var counterTimeout = 10; // time between increments in ms
$(window).load(function() {
    mod('class', 'add', 4000);
});

function mod(class, type, targetVal) {
    var $class = $(class);
    var numb = parseInt($class.html());
    numb = (type == 'add') ? numb + 1 : numb - 1;
    $class.html(numb);
    if (numb != targetVal) {
        setTimeout('mod("' + class + '","' + type + '",' + targetVal)', counterTimeout);
    }
}

Le cas de base n'est pas satisfait dans l'événement $ class.html () commence par une valeur supérieure à targetVal dans le cas de 'add' ou inférieure à targetVal dans l'autre cas. Vous devez vous assurer que cela ne se produit pas avant de lancer l'appel de fonction.