JavaScript - realizacja pętli z opóźnieniem

0

Posiadam kod HTML/JavaScript w stylu:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Autobusy</title>
		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
		<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
		<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
		<script src="https://raw.githubusercontent.com/tkrajina/leaflet-editable-polyline/master/src/leaflet-editable-polyline.js"></script>
		<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
		<style>
			body { padding: 0; margin: 0; background-color: grey; }
			#map { height: 600px; }
			a{ color: white; text-decoration: none; font-weight: bold;}
		</style>
	</head>
	<body>
		<div id="map"></div>
		<a href="#" onclick="showall()">Pokaż wszystkie znaczniki</a>
		<script>

			var attr_osm = 'Map data &copy; <a href="http://openstreetmap.org/">OpenStreetMap</a> contributors';
			var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {opacity: 0.7, attribution: [attr_osm].join(', ')});
			var map = L.map('map').addLayer(osm).setView([50.03365, 22.00638], 13);


			marker = Array();
			warstwa=L.featureGroup();
			warstwa.addTo(map);

			function showall(){
				map.fitBounds(warstwa.getBounds());
			}

			function update(number){
				var URL_address = 'json.php?id=' + number;

				$.getJSON( URL_address, function( data ) {
				xml=data;
					for(var key in data){
						value=data[key];
						if(typeof marker[key] === 'undefined'){
							marker[key] = L.marker(L.latLng(value[1], value[2]));
							marker[key].bindPopup('Linia: '+value[0]+'<br />Numer: '+key);
							warstwa.addLayer(marker[key]);
						}else{
							marker[key].setLatLng(L.latLng(value[1], value[2]));
						}
					};

					marker.forEach( function(value, key){
						if(typeof data[key] === 'undefined'){
							warstwa.removeLayer(marker[key]);
						}
					});	

				});
			}


function partB() {
   var tree;
}


			$(document).ready( function(){
				var i;
				var i_max = 1000;
				for (i = 0; i < i_max; i++) {
					update(i);
					setInterval(partB, 2500);
				}
			});

		</script>
	</body>
</html>

Problem polega na tym, że chciałbym aby w odstępach np. co sekundę JavaScript wywoływał mi funkcję update(i) z inkrementowaną w pętli zmienną i.

Próbowałem to zrobić na różne sposoby ale niestety nie wychodziło mi - nie mogłem spowolnić wywołań i występowały błyskawicznie jedno po drugim..

Jak zmodyfikować poniższy kod aby działało to dobrze?

			$(document).ready( function(){
				var i;
				var i_max = 1000;
				for (i = 0; i < i_max; i++) {
					update(i);
					setInterval(partB, 2500);
				}
			});
0

No to się zastanów jaki kod jest poprawny? Bo edytując zmieniłeś setInterval(partB(i), 2500) na setInterval(partB, 2500), co prawdopodobnie skończy się kolejnymi błędami, ale zdecydowanie naprawi problem natychmiastowego wywoływania funkcji.

Więc jeszcze raz - wklej kod TAKI JAKI MASZ i opisz problem TAKI JAKI MASZ.

0
dzek69 napisał(a):

ale zdecydowanie naprawi problem natychmiastowego wywoływania funkcji.

To nie jest problem - właśnie chcę aby funkcja była wywoływana w pętli w kolejnych iteracjach z odstępem np. 2 sekund.

W kodzie mam teraz samo setInterval(partB, 2500); - dopatrzyłem się, że powinno być bez argumentu (chyba) dopiero po wysłaniu posta i dlatego to zmieniłem.

Kod jednak nadal nie działa prawidłowo.

Zmieniłem nawet na:

                        $(document).ready( function(){
                                var i;
                                var i_max;
                                for (i = 0; i < i_max; i++) {
                                        setInterval(update(i), 2500);
                                }
                        });

Ale to także nic nie daje :(

0

Heh wylogowało mnie nieszczęśliwie.

Oczywiście wyżej przy deklaracji i_max mam także przypisanie do tej zmiennej wartości ;) Wstukiwałem kod ręcznie i zapomniałem ;)

5 
var i;
var i_max;
for (i = 0; i < i_max; i++) {
     setInterval(update(i), 2500);
}

Rozbierzmy to na kawałki.

  1. Jaką wartość ma i_max i dlaczego?
    a) 0
    b) null
    c) ""
    d) undefined
    e) false.

  2. Czy pętla od 0 do niezdefiniowanej wartości wykona się:
    a) niezdefiniowaną ilość razy
    b) nie wykona się
    c) będzie trwać nieskończenie długo
    d) wykona się tyle razy, ile chciałeś.

  3. Czy w js pętla od 0 do wartości niezainicjowanej zmiennej (patrz pkt 1) wykona się:
    a) niezdefiniowaną ilość razy
    b) nie wykona się
    c) będzie trwać nieskończenie długo
    d) wykona się tyle razy, ile chciałeś.

  4. Ile razy wykona się funkcja wywoływana przez setInterval?
    a) wcale
    b) raz
    c) nieskończenie wiele razy
    d) nieskończenie wiele razy lub do momentu zamknięcia przeglądarki/zakładki ze stroną lub wywołania clearInterval.

  5. Ile razy wykona się funkcja wywoływana przez 1000 powtórzeń wywołania setInterval?
    a) wcale
    b) raz
    c) nieskończenie wiele razy
    d) nieskończenie wiele razy lub do momentu zamknięcia przeglądarki/zakładki ze stroną lub wywołania clearInterval
    e) przeglądarka zawiesi się, a potem wyświetli informację o zbyt długo wykonującym się js.

  6. Jeśli przeglądarka z sytuacji z punktu 5. się zawiesi, to z jakiego powodu?
    a) mam szybki komputer i nic się nie będzie wieszać
    b) co 2500ms będzie się wykonywać "naraz" 1000 razy kod mojej funkcji, może nie zdążyć w 2500ms (bo to daje 2.5ms per wywołanie funkcji)
    c) nic się nie zawiesi, będzie się wykonywać jedna funkcja co 2.5s
    d) nic się nie zawiesi, wykona się jedna funkcja co 2.5s, a po 2500s funkcja nie będzie już wywoływana.

  7. Czym różni się podanie jako argument f(i) od f (vide setInterval(mojaFunkcja(i)) vs setInterval(mojaFunkcja))?
    a) niczym
    b) w pierwszym wypadku jako wartość argumentu wysłana będzie wartość zwrócona przez funkcję, np. void (undefined?), w drugim wartością argumentu będzie sama funkcja
    c) różni się tylko treść kodu, wykona się tak samo.

  8. Mam zmienną lokalną i, w pętli po i od 0 do 1000 robię setTimeout(f(i), 1000 * i), jaką wartość otrzymam w argumencie funkcji f?
    a) zawsze 0
    b) taką, jaką miało i w momencie wywołania setTimeout (czyli kolejne od 0 do 1000)
    c) zawsze 1000
    d) tak jak w b, ale funkcja f zostanie wywołana od razu, a nie co sekundę.

  9. Mam zmienną lokalną i, w pętli po i od 0 do 1000 robię setTimeout(function() { f(i); }, 1000 * i), jaką wartość otrzymam w argumencie funkcji f?
    a) zawsze 0
    b) taką, jaką miało i w momencie wywołania setTimeout (czyli kolejne od 0 do 1000)
    c) zawsze 1000
    d) tak jak w b, ale funkcja f zostanie wywołana od razu, a nie co sekundę.

  10. Mam zmienną lokalną i, w pętli po i od 0 do 1000 robię setTimeout(f, 1000 * i, i), jaką wartość otrzymam w argumencie funkcji f?
    a) niezdefiniowaną
    b) zawsze 0
    c) taką, jaką miało i w momencie wywołania setTimeout (czyli kolejne od 0 do 1000)
    d) zawsze 1000
    e) tak jak w b, ale funkcja f zostanie wywołana od razu, a nie co sekundę
    f) nie umiem czytać dokumentacji.

  11. Mam kod: var someString = "a"; alert(someString); someString = "b";. W wyniku jego działania dostanę:
    a) puste okno alertu
    b) okno alertu z napisem "a"
    c) okno alertu z napisem "b"

  12. Mam kod: var someString = "a"; setTimeout(function() { alert(someString); }, 1000); someString = "b";. W wyniku jego działania dostanę:
    a) puste okno alertu
    b) okno alertu z napisem "a"
    c) okno alertu z napisem "b"
    d) kod się wywali, bo someString to zmienna lokalna.

  13. Ile razy wykona się setInterval(f, 100), a ile razy setTimeout(f, 100)?
    a) 1, 1
    b) 100, 100
    c) nieskończenie wiele, 1
    d) nieskończenie wiele, nieskończenie wiele.

Podane pytania i uważne zastanowienie się nad odpowiedziami powinny naprowadzić Cię na rozwiązanie Twojego problemu, przy okazji wyjaśniając czym praktycznie różni się asynchroniczne wykonanie kodu (setTimeout/setInterval/worker) od wykonania synchronicznego.

1 użytkowników online, w tym zalogowanych: 0, gości: 1