dlaczego jquery nie może dokładnie ożywiać liczby?

Question

próbuję użyć następującego kodu, aby zwiększyć liczbę w polu tekstowym

// Animate the element's value from 0 to 1100000: 
$({someValue: 0}).animate({someValue: 1100000}, { 
    duration: 1000, 
    step: function() { // called on every step 
     // Update the element's text with value: 
     $('#counterx').text(Math.floor(this.someValue+1)); 
    } 
}); 

ona pracuje z małych ilościach jak od 0 do 100 ale jeśli chodzi o dużą liczbę jak we wspomnianym kodem, go nie podaje docelowego numeru, animuje się do cyfr takich jak 1099933 lub 1099610 lub ..... i za każdym razem, gdy się zmienia.

, więc w jaki sposób mogę go animować do wskazanej liczby?

Answer 1

Mam ten sam problem. Rozumowanie jest takie, że funkcja animate używa formuły matematycznej opartej na czasie. Naprawdę nie zauważysz tego podczas animowania czegoś opartego na css, ponieważ wystarczająco blisko w pikselach jest wystarczająco dobre. Zbliża się do wartości końcowej, ale nie zawsze może być dokładnie wartością końcową. Rozwiązaniem jest użycie zdarzenia complete, aby ustawić ostatnią wartość.

Oto co trzeba zrobić:

function animateNumber(ele,no,stepTime){ 
 
$({someValue: 0}).animate({someValue: no}, { 
 
     duration: stepTime, 
 
     step: function() { // called on every step. Update the element's text with value: 
 
      ele.text(Math.floor(this.someValue+1)); 
 
     }, 
 
     complete : function(){ 
 
      ele.text(no); 
 
     } 
 
}); 
 
} 
 

 
animateNumber($('#counterx'),100,10000); 
 
animateNumber($('#countery'),100,1000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
counterx(slow): <span id=counterx>--</span> 
 
<br/> 
 
countery(fast): <span id=countery>--</span>

Answer 2

Animacja nie jest zaprojektowany przyrost wartości licznika jako tekst (choć może pracować przez przypadek, który mógłby zmienić z dowolnego nowa wersja jQuery), to zaprojektowane do animacji jednej lub więcej właściwości CSS. Zamiast tego powinieneś używać setInterval.

http://jsfiddle.net/jbabey/mKa5r/

var num = 0; 

var interval = setInterval(function() { 
    document.getElementById('result').innerHTML = num; 
    num++; 

    if (num === 100) { 
     clearInterval(interval);    
    } 
}, 100);​ 

Answer 3

1) JavaScript jest pojedynczym gwintem aplikacji. Limity czasu i animacje TYLKO pchają zdarzenie na koniec stosu w oparciu o idealną kolejność układania. Długo działająca sekcja skryptu może spowodować, że faktyczny czas ostrzału wydarzenia znacznie przekroczy dokładność, której szukasz.

2) Animacja przybliża stopień przyrostu, a na większych liczbach rozdzielczość jest bardzo niedokładna.

3) jQuery ma tylko jeden bufor animacji. Możesz napotkać poważne problemy z renderowaniem, jeśli wywołasz więcej niż jeden "licznik" za pomocą animacji. Upewnij się, że zatrzymałeś poprzednią animację przed dokonaniem jakichkolwiek korekt, które to wpłyną.

4) Nawet przy limicie czasu wynoszącym 0 można oczekiwać opóźnienia rzędu ~ 15. Nawet jeśli jest to jedyny "wątek", który masz uruchomiony.

Rozwiązanie:

take a snapshot of the DTG 
set your interval to something within the human experience, say ~200 
on each interval, check how much time has passed from the original DTG 
set your text field to that delta number. 
stop the interval with the original DTG + "your target number" > the new DTG 

Answer 4

Oto rozwiązanie, które nie korzysta z .animate().

DEMO:http://jsfiddle.net/czbAy/4/

to tylko liniowy modyfikacji; nie dostaniesz opcji złagodzenia, jeśli o to chodziło.

var counterx = $('#counterx'), // cache the DOM selection! :) 
    i = 0, 
    n = 1100000, 
    dur = 1000, // 1 second 
    int = 13, 
    s = Math.round(n/(dur/int)); 

var id = setInterval(function() { 
    counterx.text(i += s); 
    if (i >= n) { 
     clearInterval(id); 
     counterx.text(n); 
    } 
}, int); 

Answer 5

Tutaj jest jquery plugin do animowania numery niezawodnie, ut wykorzystuje kompletny zwrotnego, aby ustawić prawidłową liczbę końcową po zakończeniu animacji:

https://github.com/kajic/jquery-animateNumber