Programiranje

Javascript interval pomoć

Antonio91 ned 3.5.2020 14:46

Pozdrav, pratim tutorijal iz knjige, uradio sam skoro sve ali ne mogu rijesit sljedeci problem...

 

Zadatak je bio "animirati" tekst i da se na klik misa zaustavi, uspio sam text "animirati" ali kad kliknem izbaci mi "intervalB is not defined"...

Znam da je problem oko "scopa"... Ali ne znam tocno sta treba uradit... 

Ne znam zasto nemam pristup funkciji u kome je intervalB definiran, jer nije lokalni nego globalni scope, da stoji "var intervalB = setInterval(moveHeadingDown, 30);" onda bi bio lokalni, da li sam u pravu?

 

Ako je netko voljan pomoci bio bi mu zahvalan...

 

 

<!DOCTYPE html>
<html>
<head>
<title>Interactive programming</title>
</head>
<body>
<h1 id="heading">Hello world!</h1>

<script src="https://code.jquery.com/jquery-2.1.0.js"></script>

<script>
// We'll fill this in next

 

var leftOffset = 0;
var topOffset = 0;


var moveHeading = function () {
$("#heading").offset({ left: leftOffset });

leftOffset++;

if (leftOffset > 200) {
leftOffset = 200;
intervalB = setInterval(moveHeadingDown, 30);
}
};

intervalA = setInterval(moveHeading, 30);

var moveHeadingDown = function () {
$("#heading").offset({ top: topOffset });

topOffset++;

if (topOffset > 200) {
topOffset = 200;
intervalC = setInterval(moveHeadingRight, 30);
}
};

var moveHeadingRight = function () {
$("#heading").offset({ left: leftOffset });

leftOffset--;

if (leftOffset < 0) {
intervalD = setInterval(moveHeadingUp, 30);
leftOffset = 0;
}
};

var moveHeadingUp = function () {
$("#heading").offset({ top: topOffset });

topOffset--;

if (topOffset < 0) {
topOffset = 0;
}
};

var clickHandler = function (event) {
clearInterval(intervalA);
clearInterval(intervalB);


console.log("Click!");
};

$("html").click(clickHandler);


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

The Acacia Strain ned 3.5.2020 15:55

Ne znam je li potrebno da kada klikneš opet da tekst nastavi dalje sa animacijom ili je dovoljno da samo stane. Ako je tako, onda bi ja to ovako odradio:

 

var moveHeading = function () {
$("#heading").offset({ left: leftOffset });

leftOffset++;

if (leftOffset > 200) {
leftOffset = 200;
}
};

intervalB = setInterval(moveHeadingDown, 30);

intervalA = setInterval(moveHeading, 30);

 

 

 

Tekst se zaustavlja na click, a u consol.log-u nema više "intervalB is not defined"..

 

jedina je razlika što kada pustiš tekst koji se kreće ide samo u jednom smjeru, dok je tvoj pratio drugačiju putanju, tj. neki krug bi odradio.. barem je meni tako animiralo..

 

Antonio91 ned 3.5.2020 16:18

Razumijem sto zelis reci, ali ovako nesto mi nije bio problem, jer imas samo jednu funkciju. I sve je u globalnom scopeu U mom primjeru imao sam vise funkcija, jedna u drugoj(odnosno pozivanje tih funkcija), i tu je bio problem kako pozvat "clarInterval" iz globalnog scopea u localni scope druge funkcije... Ako ja to dobro razumijem...

 

U ovom tvom primjeru nevidim funkciju koju poziva "intervalB = setInterval(moveHeadingDown, 30);" - pretpostavljam da se zato i ne pojavljuje "intervalB is not defined" jer je koliko ja vidim te funkcije nema...

 

 

MrBlc ned 3.5.2020 21:25

intervalB = setInterval(moveHeadingDown, 30);

 

ovo bi ti po strict standardu bacilo error jer ti nigdje nije varijabla intervalB definirana. Pošto ti strict standart nije uključen, to je ekvivalentno:

 

var intervalB = setInterval(moveHeadingDown, 30);

 

te kreira lokalnu varijalu u scopeu funkcije. Zašto? Zato što varijabla intervalB ne postoji.

 

Ako u globalni scope dodaš 

 

var intervalB;

 

onda ti ta varijabla postoji, pa se više neće kreirati nova u lokalnom scopeu, već će biti asignana u globalnom scopeu.