Forum PHP.pl > [JS] Timer zatrzymuje się na 0.1

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JS] Timer zatrzymuje się na 0.1

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

Dominator

19.03.2013, 16:21:16

Jak w temacie, dlaczego?

[PHP] pobierz, plaintext 
<html>
	<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function()
	{
		var milisec=0;
		var seconds=0;
		function display()
		{
			if (milisec>=9)
			{
				milisec=0;
				seconds+=1;
			}
			else
			{
				milisec+=1;
				setInterval("display()",100);
				$("div[id='timer']").text(seconds+"."+milisec);
			}
		}
		display();
	});
	</script>
	</head>
	<body>
		<div id="timer"></div>
	</body>
</html>
[PHP] pobierz, plaintext

lukasz1985

19.03.2013, 17:41:47

[HTML] pobierz, plaintext 
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>TODO write content</div>
 
 
        <script type="text/javascript" > 
 
            window.onload = function()
            {
                var time = 0;
                function display(){
                    time += 0.1
 
                    seconds = Math.floor(time );
                    milisec = Math.floor(( time *10 ) % 10 );
                    document.getElementById("timer").innerHTML = seconds+"."+milisec;
                }
 
                setInterval(display, 100);
            };
        </script> 
 
        <div id="timer">
 
        </div>
    </body>
</html>
[HTML] pobierz, plaintext

kamil4u

19.03.2013, 17:43:24

Tobie chyba chodzi o funkcję setTimeout a nie setInterval.

Chociaż powinieneś przerobić tak kod, żeby skorzystać z setInterval. Jak? Zajrzyj do dokumentacji( szukaj pod "MDC" ). A jeżeli sobie nie poradzisz to zgłoś się ponownie i napisz czy chcesz to zrozumieć czy potrzebujesz gotowca. Wtedy opiszę wszystko dokładnie(lub mniej przy gotowcu )

Pozdrawiam

--edit--
O widzisz - już dostałeś gotowca

--edit2--
@lukasz1985:
Jeszcze przyczepię się do Twojego kodu.
W kodzie masz:
- document.getElementById("timer")

Ja bym użył zmiennej globalnej, gdzie zapisałbym referencję do tego elementu. Tak jak masz teraz to niepotrzebne marnowanie czasu na wyszukiwanie tego elementu co bardzo krótki czas. I tak wiem, że to prosty przykład i pewnie się bardzo nie starałeś, ale piszę to po to, że może w przyszłości będziesz pisał coś większego to wtedy warto robić takie optymalizacje

Kiedyś można było wyczuć różnicę gołym okiem, teraz są lepsze przeglądarki i komputery, ale takie dobre nawyki dobrze mieć.

Dominator

19.03.2013, 18:05:06

Dziękuję za pomoc, opracowałem własne i znacznie krótsze narzędzie, a działa tak samo

Jakbyście mi mogli powiedzieć jeszcze - jaka funkcja zaokrągla liczby? (w php jest round)

kamil4u

19.03.2013, 18:18:47

Cytat

Dziękuję za pomoc, opracowałem własne i znacznie krótsze narzędzie, a działa tak samo smile.gif

Pochwal się

Cytat

Jakbyście mi mogli powiedzieć jeszcze - jaka funkcja zaokrągla liczby? (w php jest round)

Google -> "js round" -> http://www.w3schools.com/jsref/jsref_round.asp

Dominator

19.03.2013, 18:19:26

[PHP] pobierz, plaintext 
<html>
	<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function()
	{
		var system =
		{
			round: function(n, k)
			{
				var factor = Math.pow(10, k+1),
					n = Math.round(Math.round(n*factor)/10);
				return n/(factor/10);
			},
			initTimer: function()
			{
				window.setInterval(function()
				{
					var a = $("div[id='timer']").text(),
						b = "0.1",
						c = system.round(Number(a) + Number(b), 1);
					$("div[id='timer']").text(c);
				}, 100);
			}
		}
		system.initTimer();
	});
	</script>
	</head>
	<body>
		<div id="timer">0.1</div>
	</body>
</html>
[PHP] pobierz, plaintext

Co o tym sądzicie?

kamil4u

19.03.2013, 19:16:47

Nie powiedziałbym, że jest to lesze

Krótkie uwagi( trudno to nazwać błędami ):
-

Kod

b = "0.1",

operuj na liczbach nie na tekstach, czyli zamieniaj string to int, a nie int to string

-

Kod

$("div[id='timer']")

jQuery ma dostęp do id za pomocą $('#id')
-

Kod

Math.round(Math.round(n*factor)/10);

Po co zewnętrze Math.round?

- jak dla mnie kod jest brzydki - w sensie wizualnym. ale to moje prywatne odczucie - z kilka sekund zajęło mi ogarnięcie o co chodzi, gdzie np. przy kodzie ~lukasz1985 od razu widziałem co gdzie i z czym

- funkcję round zastąp tym kodem: https://developer.mozilla.org/en-US/docs/Ja...ects/Math/round -> "Example: Decimal rounding"

Generalnie dobrze, że próbujesz pisać coś sam, a nie jak większość kopiujowanie rozwiązania. Ja też próbowałem wszystko zawsze sam pisać i właśnie dzięki temu mogę dziś powiedzieć, że umiem JS. Jesteś na dobrej drodze. Powodzenia!

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.