Opóżnienie petla .each setTimeout

0

Witam, mam problem nie chce mi działać setTimeout w kazdym kroku pętli...
Pierwszy krok jest opozniony o te 5sec a kolejne nr indexu wyświetlaja się jeden po drugim bez Timeout

Proszę o pomoc

$item = $('.dowiesz_sie_list .list_item');

  $item.each(function(index) {
	  var test = $(this).data("id");
	  setTimeout(function () {
		    alert(test);
		    
		}, 5000);
	});


0

Wyświetlają się jeden po drugim tuż po tym pierwszym? ;-)

0

Tak, nie ma pomiędzy nimi tej przerwy 5sekundowej

0

Nie ma pomiędzy nimi przerwy, bo i nic takiego nie zakodowałeś.
Jest pięciosekundowa przerwa od momentu wykonania setTimeout, a że to setTimout wykonujesz jedno po drugim, no to...

1

setTimeout jest asynchroniczne - nie blokuje pętli na czas wykonania - rejestruje się jeden timeout, czeka w tle, pętla leci natychmiast dalej, rejestruje się drugi timeout itd. Czyli w ułamku milisekundy są rejestrowane wszystkie timeouty. Wszystkie wyświetlają Ci się z timeoutem, wbrew temu co Ci się wydaje - tyle że tak jak napisałem - są rejestrowane niemal jednocześnie, polecam:

Żeby rozwiązać Twój problem powinieneś zarejestrować kolejny timeout dopiero w momencie wykonania poprzedniego, czyli nie w pętli wszystkie na raz, tylko w callbacku (rekursywnie w funkcji przekazywanej do timeouta. Np tak:

const $items = $('.example')
recur($items)

function recur ([first, ...rest]) {
  if (first) {
    setTimeout(() => {
      console.log(first.dataset.id)
      recur(rest)
    }, 1000)
  } 
}

czy też (jeśli już chcesz się bawić w archeologię) coś w tym stylu:

var $items = $('.example')
recur($items.toArray())

function recur (items) {
  var first = items[0]
  var rest = items.slice(1)
  
  if (first) {
    setTimeout(function () {
      console.log(first.dataset.id)
      recur(rest)
    }, 1000)
  } 
}

CodePen: http://codepen.io/anon/pen/jBeLYP?editors=1012

1

@Maciej Cąderek ale żeś przekombinował:

var items = $('.dowiesz_sie_list .list_item');

items.each(function(index) {
  var id = $(this).data("id");
  setTimeout(function () { console.log(id); }, 5000 * (index + 1));
});

Uwagi do autora: unikaj $ na początku zmiennych a także deklaruj wszystkie zmienne (var), to jest js a nie php. Nazwa "test" jest bardzo słaba. Zamiast alert używaj console.log i konsoli z wbudowanych w przeglądarkę narzędzi webmasterskich (F12 albo Shift+F5), console.log może wypisywać do konsoli znacznie więcej informacji.

0

Dzięki za odpowiedzi ! Sprawdzę po pracy, dopiero siadam do js ale powoli do celu ☺ każda uwaga jest cenna!

0

Witam, działa tak jak chciałem tylko nie wiem jak zrobić zeby petla .each wykonywała się od nowa gdy sie skończy...
Próbowałem różne sposoby i skończyły mi sie pomysły

$item = $('.dowiesz_sie_list .list_item');

    $item.each(function(index) {
        var item_index = $(this).data("id");
        var item_prev_index = $(this).data("id")-1;
        setTimeout(function () {
    
        	$item.filter(function() {
                return $(this).data('id') === item_index
            }).addClass('active');
        	$item.filter(function() {
                return $(this).data('id') === item_prev_index
            }).removeClass('active');
    		
          }, (index + 1)  * 1000);
        
      });
1

Np tak (bez uzycia jQuery, bo w sumie tylko przeszkadza):

const items = document.querySelectorAll('.example')
const lastIndex = items.length - 1

highlightElements(items)

function highlightElements (items, index = 0) {
  const prevIndex = index === 0 ? lastIndex : index - 1
  const nextIndex = index === lastIndex ? 0 : index + 1
        
  items[index].classList.add('active')
  items[prevIndex].classList.remove('active')
  
  setTimeout(highlightElements, 1000, items, nextIndex)
}

CodePen: https://codepen.io/anon/pen/vxQyBQ?editors=1010

W takiej formie może to sobie bezpiecznie działać w nieskończoność.


W tym Twoim przykładzie zupełnie bez sensu filtrujesz tablicę itemów dwukrotnie, mając wszystkie potzrebne dane bez tego (index).
Dodatkowo rozwiązanie z dodawaniem setTimout w pętli się nie sprawdzi dla nieskończonego cyklu.
Nie wiem też w sumie po co Ci pola data-id, bo wygląda na to, że to liczby porzadkowe, równie dobrze można skorzystać z indeksów tablicy (jak w przykładzie).

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