

If you’re not familiar with JS Promises, it’s important to first understand that while Javascript is single-threaded (meaning it can only process one statement at a time), it is also asynchronous (meaning it can start processing a new statement before the previous statement has resolved, allowing it to multitask time-consuming processes in the background.).


I decided there had to be a way to construct my own dupe of that handy little method. It was so nice to be able to schedule events to the exact time I wanted them to run! I knew that if I could just pause for half a second between the scroll and the API Fetch, everything would look much smoother. I wanted a way to slow things down, so the user would only see one thing happening on the page at a time. However, the the combo of the page scrolling up and the image fetch simultaneously re-firing looks pretty messy. We can just scroll up the window, then trigger a new click event on the button we’ve assigned to the variable button. Enter fullscreen mode Exit fullscreen mode
