• Friday , 10 April 2020

9.6: JavaScript Closure – p5.js Tutorial

Code Canyon



This video covers JavaScript closures. What is a closure? Why is it useful? The context explored is a closure function that animates a DOM element in the browser.

All examples: https://github.com/shiffman/Video-Lesson-Materials

Contact: https://twitter.com/shiffman

All JavaScript/p5.js videos: https://www.youtube.com/user/shiffman/playlists?shelf_id=14&view=50&sort=dd

Help us caption & translate this video!

http://amara.org/v/Qbta/

Original source

3d Ocean

Related Posts

39 Comments

  1. Ibrahim Iqbal
    December 13, 2018 at 00:36

    Awesome explanation!

  2. holya69
    December 13, 2018 at 00:36

    Why not define timeIt function outside makeTimer and pass the counter?!! easier to read. This is like anonymous methods in C# or Java.

  3. Jordan Smithson
    December 13, 2018 at 00:36

    THANK YOU!!! This totally flicked on a few lightbulbs!

  4. Ameer ul Islam
    December 13, 2018 at 00:36

    I wanted to say it's a great video, but I think I still didn't get everything about closure.

  5. Did You Know ?
    December 13, 2018 at 00:36

    please i need contact you

  6. Baptiste Doucerain
    December 13, 2018 at 00:36

    Why using closure instead of class and instance ? You could create 2 instances of a class "makeTimer" and store in each : a counter, a method setInterval() and timeIt()

  7. 12Starlight #MoreThanCoding and #HackReactor
    December 13, 2018 at 00:36

    Your videos are AMAZING 😉

  8. Woodenmushroom
    December 13, 2018 at 00:36

    So how do you get rid of the closures? Would you have to use clearInterval somehow?

  9. Derek Howden
    December 13, 2018 at 00:36

    so think of closure as enclouser duh…. thank you

  10. Azez Nassar
    December 13, 2018 at 00:36

    Has he done more examples?

  11. Fredo Corleone
    December 13, 2018 at 00:36

    It's not difficult:

    Closure is when a function (child), inside another function (parent), has access to its parent variables.

    The inverse does not apply, a parent function cannot see variables of its children functions.

  12. bouhannache abdallah
    December 13, 2018 at 00:36

    dude that just nested functions ,it doesn't really show the meaning of closures ,i mean closures are indeed meant to be done with some returned functions that will operate later when we pass them another ,parameter.
    ain't that ?

  13. A Day in the Life of
    December 13, 2018 at 00:36

    It's amazing how you explain things my mind just goes click and I totally understand it. Absolute gift of teaching.

    Would you please consider doing a full Vanilla JavaScript tutorial??

  14. Nurfed Nurfed
    December 13, 2018 at 00:36

    I can't express the joy I have watching your videos and you've explained this in such a fantastic way that resonates with me so well, keep up the excellent work.

  15. sarfaraz kasmani
    December 13, 2018 at 00:36

    Please share the source code

  16. jasbinder singh
    December 13, 2018 at 00:36

    Why do these californian IT types always wear dorky t-shirts and an open top shirt ??

  17. Elio Alvarado
    December 13, 2018 at 00:36

    You are the best man! You have a particular way to explain, thank you for the class I really get it!

  18. Hamed Pour
    December 13, 2018 at 00:36

    Increase speed to 1.5X … thank me later

  19. Josh Foster
    December 13, 2018 at 00:36

    This was a great example. Thanks!

  20. LRK DXN
    December 13, 2018 at 00:36

    thank you

  21. AlexGW
    December 13, 2018 at 00:36

    Next on the list to help your hatred of JS, context coercion! 😛

  22. AlexGW
    December 13, 2018 at 00:36

    come on man, foo() and bar() always suffice for examples 🙂 Or is that usually just a PHP inside joke type thing?

  23. Robert Williams
    December 13, 2018 at 00:36

    Hello Mr Train, you are very silly but you really know your stuff. This is the best video Ive seen on this topic. Its seem that closures are really hard to do but very difficult to explain. Thank you.

  24. Matt OToole
    December 13, 2018 at 00:36

    Really well-explained.

  25. vivek kumar
    December 13, 2018 at 00:36

    great video

  26. Prashant Vats
    December 13, 2018 at 00:36

    lund ho tum

  27. Jonathan burnhill
    December 13, 2018 at 00:36

    Thank you for simplifying things

  28. Ritik Khatri
    December 13, 2018 at 00:36

    LOOK what I made using this !
    https://codepen.io/rk2208/pen/rpBpYx

  29. Zbigniew Kwiatkowski
    December 13, 2018 at 00:36

    cool, very useful

  30. Anastasia Molchanova
    December 13, 2018 at 00:36

    Very interesting! Thank you. What is about setInterval if it starts after click for example? Clicking again and again make new intimation more and more. How we should protect code of new clicking animation all over again?

  31. Stephan de Vries
    December 13, 2018 at 00:36

    Why wouldn’t you put timeIt outside of the makeTimer scope and pass in the elt and counter references though?

  32. dcabajian10
    December 13, 2018 at 00:36

    Great video!

  33. Siddharth Panda
    December 13, 2018 at 00:36

    Awesomest videos on youtube, I draw inspiration from you as a teacher, your method of teaching is similar to mine though you're literally the Epicest person on youtube
    Epic Dude!!! I'm so sorry about one thing though……………………….
    .
    .
    .
    .

    .
    .
    .
    .
    .

    I found your videos too late !!!!

  34. Video Highlights
    December 13, 2018 at 00:36

    Finally!!! I found a video example of CLOSURE that makes clear sense. Not only does it make clear sense but it's fun to watch. Goofy, silly, insightful, genius, captivating, pure educational entertainment. Highly recommended.

  35. nexusbug
    December 13, 2018 at 00:36

    Dan, I love you, I owe you 🙂 These videos are very helpful and colorful.

    I have a question:

    I am trying to synchronize the start time of both timers, so I tried the code below in the setup() function:

    makeTimer(timer1, 1000);
    setTimeout(makeTimer(timer2, 500), 1000);

    the rest of the code is same with the one here. Interestingly program is working but setTimeout() does't seem to work. timer2 still starts 500 milliseconds before timer1.

    Anyone?

  36. Simon Bouchard
    December 13, 2018 at 00:36

    I love that you don't edit your mistake :p but it makes me scream.

  37. Alan Jones
    December 13, 2018 at 00:36

    The best explanation I've seen on a closure, thank you!

  38. HellaDev
    December 13, 2018 at 00:36

    I owe you my career. Thank you so much for your dedication to teaching!

Leave A Comment

You must be logged in to post a comment.