Zatrzymanie funkcji setInterval

Question

Poznaję funkcje seInterval i setTimeout i mam mały problem z bardzo prostym zadaniem. Oto jego treść:

Napisz funkcję ```boilEgg```, która jako argument przyjmie czas w sekundach, a jej wywołanie spowoduje, że po zadanym czasie na konsoli wyświetli się komunikat "jajko ugotowane".
Dodatkowo co 5 sekund, podczas gotowania w konsoli wyświetl napis "jajko się gotuje".
Przetestuj swoją funkcję dla 30 sekund (czas gotowania).

Mój kod póki co wygląda tak: 

function boilEgg(seconds) {
    setInterval(function() {
        seconds -= 5;
        if (seconds === 0) {
            console.log('jajko ugotowane');
        } else {
            console.log('jajko się gotuje');
        }
    }, 5000);
}

boilEgg(30);

I o ile do pewnego momentu funkcja działa prawidłowo, to nie potrafię zrobić, aby po 'jajko ugotowane' przestała się wykonywać. Próbowałem użycia clearInterval, jednak w żadnym miejscu w którym go użyłem nie działał, na przykład:

function boilEgg(seconds) {
    setInterval(function boil() {
        seconds -= 5;
        if (seconds === 0) {
            console.log('jajko ugotowane');
            clearInterval(boil);
        } else {
            console.log('jajko się gotuje');
        }
    }, 5000);
}

boilEgg(30);

Będę wdzięczny za olśnienie mnie, bo jest to z pewnością banalny problem przy którym utknąłem dłuższą chwilę.

Comments

Nie znam się na js, ale po chwili czytania w internecie wnioskuje że clearInterval() działa na nazwe inreval czyli 

var myVar = setInterval(function(){ setColor() }, 300);

function setColor() {
    var x = document.body;
    x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}

function stopColor() {
    clearInterval(myVar);
}

 

Answer 1

Metoda setInterval (podobnie jak jej "odpowiednik" setTimeout) zwraca identyfikator, który musisz przekazać do clearInterval, aby ją zatrzymać.

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval

Zatem najpierw potrzebujesz zapisać sobie ten identyfikator:

var intervalId = setInterval(function boil() {

, a następnie przekazać go do clearInterval:

clearInterval( intervalId );

 

P.S. Nie ma w Twoim kodzie potrzeby nazywania funkcji jako boil (zostaw ją anonimową), ponieważ nie wywołujesz jej nigdzie - a do zatrzymania interwału nie jest Ci to potrzebne.

Comments

Edit:

Udało się. Poniższa funkcja działa tak jak określa to zadanie:

function boilEgg(seconds) {
    var boil = setInterval(function () {
        seconds -= 5;
        if (seconds === 0) {
            console.log('jajko ugotowane');
            clearInterval(boil);
        } else {
            console.log('jajko się gotuje');
        }
    }, 5000);
}

boilEgg(30);

Dziękuję za pomoc!

---

var boil

Dla lepszej czytelności nadałbym nazwę np. boilIntervalId, żeby jednak sugerowała wskazywanie na identyfikator interwału.