Wie verlängere ich das Aktualisierungsintervall oder reduziere die Anzahl der Schritte von jQuerys .animate() -Methode?

Question

Animieren mit jQuery ist einfach. Hier ist ein Beispiel für eine Zahl von 0 bis 1000 länger als 2 Sekunden Animieren:

var $h1 = $('h1'), 
    startValue = parseInt($h1.text(), 10), 
    endValue = parseInt($h1.data('end-value'), 10); 
$({ int: startValue }) 
    .animate({ 
    int: endValue 
    }, { 
    duration: 2 * 1000, 
    step: function() { 
     $h1.text(Math.ceil(this.int)); 
    } 
    }); 

Arbeitsbeispiel: http://codepen.io/troywarr/pen/NpjyJE?editors=1010#0

Diese Animation sieht nett aus, aber macht es schwierig, die Anzahl an jedem Punkt während der lesen Animation, wie die nächste Zahl innerhalb von Millisekunden ersetzt. Im Idealfall möchte ich die Zahl über die gleiche Zeitspanne animieren, aber weniger Schritte (Erhöhung der Länge des Aktualisierungsintervalls), so dass es einfacher ist, die Zahl auf einen Blick zu lesen, wenn sie animiert wird.

Es scheint nicht, dass jQuery direkte Kontrolle über die Anzahl der Schritte in der Animation oder das Aktualisierungsintervall bietet; es scheint nur eine step function zu akzeptieren, die einen interpolierten Wert erhält.

Gibt es eine Möglichkeit, die Anzahl der Schritte anzupassen, die jQuery verwendet, um die Animation über ihre Dauer zu interpolieren?

Answer 1

Hier ist ein Ansatz, den ich verwendet habe, um dies zu simulieren, die wahrscheinlich gut genug für alltägliche Zwecke funktioniert. Aus Performance-Sicht ist dies jedoch nicht ideal, da jQuery die Funktion step immer noch genauso oft aufruft wie ursprünglich.

var $h1 = $('h1'), 
    startValue = parseInt($h1.text(), 10), 
    endValue = parseInt($h1.data('end-value'), 10), 
    stepCounter = 0, 
    showNthStep = 8; 
$({ int: startValue }) 
    .animate({ 
    int: endValue 
    }, { 
    duration: 2 * 1000, 
    step: function() { 
     if (stepCounter++ === showNthStep) { 
     $h1.text(Math.ceil(this.int));   
     stepCounter = 0; 
     } 
    }, 
    complete: function() { 
     $h1.text(Math.ceil(this.int));   
    } 
    }); 

Arbeitsbeispiel: http://codepen.io/troywarr/pen/NpjYWo?editors=1010#0

Dies verwendet die Variable stepCounter die Anrufe an die step Funktion zu zählen und nur die Nummer jedes achte Mal aktualisieren (pro showNthStep).

Beachten Sie, dass die Funktion complete erforderlich ist, um die letzte Zahl Nummer eins zu aktualisieren, wenn die Funktion step kein Mehrfaches von 8 Mal aufgerufen wird.