Números animados (semi-cuenta regresiva) con JQuery?

Question

Estoy tratando de hacer un valor numérico, digamos 5000, cambiar rápidamente a otro valor, digamos 4000, usando JQuery. En este momento hago esto bien 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);
    }
}

Sé que probablemente no sea la mejor manera de hacerlo, pero lo que necesito que haga es una cuenta regresiva (o superior) de los números muy rápidamente desde el valor actual hasta el valor establecido. Lo que pretendía con este método era retrasar el uso de setInterval o setTimeout, sin embargo, eso hace que todo el script falle bastante gravemente.

Cualquier consejo es apreciado, sin embargo, preferiría no usar complementos grandes para esta tarea aparentemente simple.

Answer 1

Cuando ejecuté el código que proporcionó, quedé atrapado en un bucle infinito. Al final del ciclo do, tienes

current_value = parseInt (entumecido);

pero el valor de numb solo se establece al comienzo de la función, por lo que continúa para siempre. Si cambia eso a

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

entonces funciona bien. Excepto que parece suceder instantáneamente.

He pirateado un método para lograr la animación usando tiempos de espera que parece funcionar bastante bien, pero como todavía soy bastante nuevo en JavaScript, no sé si hay un enfoque más eficiente o no. Simplemente modifique el segundo parámetro pasado a setTimeout para obtener la velocidad deseada. Y si desea cambiar el valor de incremento / decremento, simplemente cambie la desaceleración 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

Lo que está haciendo aquí es actualizar el DOM muchas veces en rápida sucesión. Como resultado, el navegador esperará hasta que haya realizado todos los cambios, y solo entonces volverá a dibujar la página. Por lo tanto, no verá ningún cambio visual hasta que el número baje a 4000.

Sí, necesita usar un setTimeout o setInterval / clearInterval . O, para mayor claridad del código, puede usar jQuery " wait " plugin :

// (code to get new value goes here)

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

En lugar de html () , he usado text () , ya que parece que no necesita cambiar ninguna estructura HTML.

Answer 3

Me gusta el enfoque de thorn con setTimeout, pero lo condensaría en 2 funciones y lo iniciaría después de cargar la ventana para asegurar que la página se haya cargado antes de actualizar el contador:

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

El caso base no se satisface en el caso de que $ class.html () comience con un valor más alto que targetVal en el caso de 'add' o más bajo que targetVal en el otro caso. Debería asegurarse de que esto no suceda antes de realizar la llamada a la función.