Running functions on an Interval with setInterval - JavaScript Programming Basics p.3

Welcome to part 3 of the JavaScript basics tutorial series. In this part, we're going to look at a method that will allow us to animate our canvas. To do this, we're going to use the built-in called setInterval to run functions based on a programmer-set interval.

[GalHorowitz]

You did not understand your problem correctly.
The reason your initial setInterval did not work, is because what you did is do the following:
setInterval(blob(x, y, ...)(), 300);
and just like any other function, it got executed when you put () after it, i.e it evaluated blob(x, y, ...)()
and returned null.
so what you did is called setInerval(null, 300); which has no meaning.
setInterval actually takes a function as a first paramater. So for example correct usage would have been setInterval(blob, 300);
Which means you are passing an actual function, not a call to it.
Now you are faced with a problem, how do you specify the arguments to that functions?
- Option A: You create an anonymous function (what you called a throwaway function), which the setInterval calls without paramaters, which then calls blob with paramaters.
- Option B: setInterval actually takes more paramaters than the first 2. Any paramater you specify after the interval time in miliseconds, will be passed as a paramater to the function. i.e.:
setInterval(blob, 300, x, y, 20, "green");
is equivalent to
setInterval(function(){
blob(x, y, 20, "green");
}, 300);

[LeviFiction]

This is going to be a fun way to learn JS. I know the basics. I've done small things before. But seeing someone else struggle makes me feel less insane when I don't quite get it. And the very helpful explanations in the comments are a great learning resource as well.


I've already got the ball bouncing around in anticipation of video 4. Looking forward to the rest of the series. Thank you for sharing.

[bryancann]

We're taking it step by step. I'm loving it...

[TheDistractionStudio]

I’m so glad I found this channel. I Binge Watch your Videos.

[manpreetkaur]

Greatttt info always.. M big fan of yours... Always watch your video as soon as I get notification

[rchuso]

Slight problem with closures?
You could have done a function inside another function where the outer function maintains the state and returns the inner function. The inner function can use what was set when the outer function was called. Otherwise, what you have is the function being called and the result is sent to the setInterval function - a one-time function call. Look up "closures" in JavaScript. I usually do the same things with Python.

[abdulazizmusa]

I'm great fan! always interesting in your stuff

[danielabogdanoska]

Hi
Can you advice how can I add new paragraph every second with javascript?
Thanks

[chronotriggerfan]

HARRISON! Love your shit, man. Never thought I could be a programmer but now it's part of my job description thanks in part to your tutorials.

...but like yourself, I'm a Pythonista at heart and struggle with this JS-centric world we're in now. Any chance you'll be covering XMLHttpRequests/Ajax and modifying the DOM based on the response? Maybe that's beyond "basics" but it would jive so well with your Django/Flask tutorials :D

Keep doin' what you do.

[giorgianakidze]

When you were thinking like "I'm gonna learn JS" and sentdex releases a course !

Thank you ❤️

But I can't forgive you cheating on python anyway!

[SuiGio]

Maybe transfer the tutorial into managing already built websites? Would be most interesting! Great content either way!

[vredzhepov]

Hi sentdex. Finally you've started using Linux for development. Great.

[Trends]

Being a programmer it's hard to say that ... I m a big fan of URS brother... 😂🤣

[scootscootk]

Loving this series, afaik your throw away function would probably be called an anonymous function similar to a lambda in python. you could also have defined it using the es6 arrow notation. I dont think the issue was that it was being scoped to within the timer it was probably because you werent passing a callable (Im pretty sure im mixing python and js terms here but meh) to the setInverval, your timer would be trying to call the result of `blob(x, y, 20, "green")` which would be an undefined.

[MalucoDivino]

An arrow function would be more visual

setInterval(()=>blob(x, y...), 100)

[atrumluminarium]

6:55 you can maybe use the arrow syntax to clean up the clutter a bit. It's like using lambda functions in python:
()=>{blob(x, y, 20, "green")}

[lildarker]

just curious, have you tried setInterval(blob, 100, x, y, "green"); ?

[spsharan]

2:47 for the funniest and coolest mug you've ever seen 😂

[TheGBsXB]

where is my requestAnimationFrame lol, nice video btw

[greggleason]

es6 function would be a little nicer:
setInterval(() => blob(x, y, "green"), 100)
still a great tutorial, made me think ;)