ostatnia iteracja set interval

Question

Czesc!

Napisałem prosty slider, który jak widac po kodzie wyswietla po kolei ,,opinie" poprzez toggle'owanie klasy ,,visible"

- ktora po prostu ustawia wartosc display na block (defaultowo: none). Problem w tym, ze w ostatnim slajdzie musze usunac klase visible a setInterval nadal ,,trwa" te trzy sekundy co sprawia, ze po przjechaniu wszystkich elementów tablicy zawierajacej slajdy na ekranie przez ten czas widac pusta zawartosc. Probowalem clearinterval itp ale nie moge do tego dojsc.

Jak moge ,,zrestartowac" slajder zeby usunac ten efekt pustej zawartosci na koncu?

const lists = document.getElementsByTagName("li");
let x = 0;

function changeSlide(){
     lists[x].classList.remove('visible');
    x++;
    console.log(x);
    lists[x].classList.toggle('visible');
    if(x==lists.length-1){
        lists[x].classList.remove('visible');
        x=0;
    }
}
const startSlider = setInterval(changeSlide,3000)

 

Dzieki z góry za pomoc.

Comments

Użyj clearInterval()?

---

napisałem wlasnie ze próbowalem. tylko nie wiem gdzie i jak ;(

---

Probowalem clearinterval itp ale nie moge do tego dojsc

To pokaż jak próbowałeś. 

---

słowo let w tym przypadku powinno być zastąpione przez var, let używa się w określonych blokach, i nie do końca pełni rolę deklaracji zmiennych, poza tym nie wszystkie przeglądarki obsługują poprawnie ECMSScript 6, a już na pewno nie używamy słowa const, to tak na marginesie
Spróbuj coś w tym rodzaju:
 

var jakas_nazwa = setInterval(function() {
        changeSlide()
    }, 3000);
clearInterval(jakas_nazwa);

 

---

słowo let w tym przypadku powinno być zastąpione przez var, let używa się w określonych blokach, i nie do końca pełni rolę deklaracji zmiennych, poza tym nie wszystkie przeglądarki obsługują poprawnie ECMSScript 6, a już na pewno nie używamy słowa const, to tak na marginesie 

Dlaczego tak twierdzisz? Poproszę o argumenty.

---

No cóż dużo tu by pisać, polecam książkę Kyle Simpson - "ECMAScript 6 i dalej", jest tak wszytko ładnie opisane czym się różni deklaracja var, let i const.

Ogólnie próba odwołania się do zmiennej zadeklarowanej przy użyciu słowa let przed miejscem, w którym ta instrukcja została zapisana, powoduje wystąpienie błędu, w przypadku deklaracji var nie ma to żadnego znaczenia (z wyjątkiem oczywiście syntaktycznego). Idąc dalej słowo let powoduje dołączenie deklaracji zmiennej do zakresu bloku, np.{...} zawierającego tę zmienną, czyli mówiąc ogólnie let przechwytuje zakres bloku dla zmiennej, przy var tego nie ma (wyjątek funkcje i zmienne lokalne i globalne).
Ogólnie niebezpiecznie jest stosować let do zmiennych, które mają być dostępne w całym skrypcie.
Const również tworzy zmienną o zakresie bloku, jednak wartość tej zmiennej jest niemodyfikowalna, czyli stała, każda zmiana wartości powoduje błąd. Ale to nie do końca też jest tak, np.:

{

const tablica = [1, 2, 3];
tablica.push(4);
console.log(tablica) //wyświetli 1, 2, 3, 4, czyli zmieniliśmy wartość zmiennej 

tablica = 5; //błąd TypeError!

}

mam nadzieję, że choć trochę wyjaśniłem różnice między var, let i const

---

Ogólnie próba odwołania się do zmiennej zadeklarowanej przy użyciu słowa let przed miejscem, w którym ta instrukcja została zapisana, powoduje wystąpienie błędu

Tak i jest to tzw. temporal deadzone (link 1, link 2), który dotyczy także const - nie mniej, jeśli piszesz kod z głową to nie powinieneś doświadczyć takiej sytuacji.

 w przypadku deklaracji var nie ma to żadnego znaczenia (z wyjątkiem oczywiście syntaktycznego)

Ale jeśli np. inicjalizujesz zmienną poza miejscem deklaracji (oczywiście z dostępem do jej scope), to tak czy siak otrzymasz undefined, bo hoisting (obecny przy użyciu var i function) unosi tylko deklaracje, bez inicjalizacji (czy też innych przypisań) zmiennych.

Idąc dalej słowo let powoduje dołączenie deklaracji zmiennej do zakresu bloku, np.{...} zawierającego tę zmienną, czyli mówiąc ogólnie let przechwytuje zakres bloku dla zmiennej, przy var tego nie ma (wyjątek funkcje i zmienne lokalne i globalne).

Tak, ale jakie wobec tego jest przeciwwskazanie aby stosować let / const dla zmiennych, które nie są tworzone w bloku? 

Ogólnie niebezpiecznie jest stosować let do zmiennych, które mają być dostępne w całym skrypcie. 

Dlaczego? Co takiego złego robi let, że lepiej nie używać go dla zmiennych w wyższych scope? Mam nadzieję, że nie masz na myśli ogólnie global scope, którego w ogóle nie zaleca się używać lub w ograniczonym zakresie. W zasadzie, to jeśli już coś deklarujesz w global scope (czyli dla przeglądarkowego JavaScript będzie to obiekt window), to bezpieczniej używać let / const, to dzięki temu zmienna nie zostanie podpięta pod obiekt window, co przy var ma niestety miejsce.

Const również tworzy zmienną o zakresie bloku, jednak wartość tej zmiennej jest niemodyfikowalna, czyli stała, każda zmiana wartości powoduje błąd. Ale to nie do końca też jest tak, np.:

const w JavaScript uniemożliwia Ci redeklarację zmiennej, lecz nadal pozwala na jej mutację. Dlatego też nie rozumiem dlaczego napisałeś, aby go niestosować, gdzie w kodzie autora tematu const użyte jest dla zmiennych lists i startSlider, z czego pierwsza to tablica, a druga służyć ma za identyfikator do zatrzymania interwału. Nie widzę miejsca, aby zmienna lists była ponownie deklarowana, a jest ona jedynie poddawana mutacji oraz odczytywany jest jej property length. Dlaczego więc zmienna przechowująca listę elementów DOM miała by nie być deklarowana słówkiem const?

---

Każdy programista ma swoje doświadczenia i wyrobione jakieś nawyki, ja mam takie i koniec, nie stosuje w kodzie rzeczy, które mogą choć trochę dać wątpliwości komuś, kto będzie ten kod kiedyś przeglądał bądź modyfikował.
Nie krytykuję w żadnym wypadku powyższego kodu użytkownika, tylko stwierdzam wg mojego doświadczenia i przekonania, że zastosowanie w tym przypadku let a zwłaszcza const jest nie na miejscu. Choć Twoje wyjaśnienie jest poprawne i bardzo dobre, to programista (który nie posiada takiej wiedzy co Ty) widząc słowo const ma na myśli stałą, jak np. const w PHP, a w kodzie autora nie jest to wartość strikte stała i mogą być tutaj nieporozumienia.

---

Spoko, każdy może pisać jak mu wygodnie, pod warunkiem, że to projekt prywatny, albo ma 100% pewność że w przyszłości nikt inny tam nie zajrzy (co jest trudne do przewidzenia)  :) W dobrych projektach zespołowych stosuje się tzw. style guide. W jednym z najbardziej popularnych zaleca się właśnie stosowanie const i let zamiast var: https://github.com/airbnb/javascript/blob/master/README.md#variables

Jeśli będziesz pracować w projekcie z jakimś style guide, to albo się dostosujesz, albo (jeśli będzie to możliwe czasowo i uda Ci się przekonać resztę zespołu) będziesz musiał przekonać team do zmiany stylu pisania.

Co do tego, że specyfika const jest myląca - tak, ale dla kogoś spoza JS. Jeśli ktoś nie znający JS będzie miał styczność z projektem, gdzie znajdzie "dziwny kod" to po prostu będzie musiał się douczyć.

---

No cóż, za stary na to jestem. Jeszcze dobrze człowiek nie nauczy się a tu już wprowadzają zmiany i to dość duże. Zresztą jakbyś przez lata pracował z młodzieżą i próbował ich czegoś nauczyć, a oni usilnie stawiają silny opór i jesteś na etapie warunków i pętli to.... a gdzie tu reszta? Mi usilnie na studiach, kursach, itp. wmawiają jedno, a potem człowiek się przekonuje o drugim...
Niemniej dziękuję za żywą dyskusję, zawsze to człowiek nauczy się czegoś nowego, o stylu guide nie słyszałem, ale już wiem o co chodzi.