Numeri animati (semi-conto alla rovescia) con JQuery?

Question

Sto cercando di creare un valore numerico, ad esempio 5000, passare rapidamente a un altro valore, ad esempio 4000, utilizzando JQuery. In questo momento lo faccio bene usando:

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);
    }
}

So che probabilmente non è il modo migliore per farlo, ma quello che mi serve per farlo è il conto alla rovescia (o su) i numeri molto rapidamente dal valore corrente al valore impostato. Quello che intendevo con questo metodo era di avere un ritardo nell'usare setInterval o setTimeout, ma ciò fa fallire abbastanza male l'intero script.

Qualsiasi consiglio è apprezzato, tuttavia preferirei non utilizzare plugin di grandi dimensioni per questo compito apparentemente semplice.

Answer 1

Quando ho eseguito il codice fornito, sono stato catturato in un ciclo infinito. Alla fine del ciclo do, hai

current_value = parseInt (numb);

ma il valore di intorpidimento è impostato solo all'inizio della funzione, quindi continua all'infinito. Se lo cambi in

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

quindi funziona benissimo. Solo che sembra accadere all'istante.

Ho hackerato un metodo per realizzare l'animazione usando timeout che sembrano funzionare abbastanza bene, ma dato che sono ancora abbastanza nuovo su JavaScript non so se esiste un approccio più efficiente o meno. Basta modificare il secondo parametro passato a setTimeout per ottenere la velocità desiderata. E se vuoi cambiare il valore di incremento / decremento, basta cambiare la decelerazione di 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

Quello che stai facendo qui è aggiornare il DOM molte volte in rapida successione. Di conseguenza, il browser attenderà fino a quando non avrai apportato tutte le modifiche e solo allora ridisegnerà la pagina. Quindi, non vedrai alcun cambiamento visivo fino a quando il numero non scende fino a 4000.

Sì, è necessario utilizzare un setTimeout o setInterval / clearInterval . Oppure, per chiarezza del codice, puoi utilizzare jQuery " wait " plug :

// (code to get new value goes here)

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

Invece di html () , ho usato text () , poiché sembra che non sia necessario modificare alcuna struttura HTML.

Answer 3

Mi piace l'approccio di thorn con setTimeout, ma lo condenserei fino a 2 funzioni e lo avvierei dopo il caricamento della finestra per assicurarmi che la pagina sia stata caricata prima di aggiornare il contatore:

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);
    }
}

Il caso base non è soddisfatto nell'evento $ class.html () inizia con un valore superiore a targetVal nel caso di 'add' o inferiore a targetVal nell'altro caso. Dovresti assicurarti che ciò non accada prima di effettuare la chiamata di funzione.