I realized that I could exploit this functionality by building a Promise around Javascript’s built-in setTimeout () method.ġ: A function to be executed after the timer expires.Ģ: The time, in milliseconds (thousandths of a second), the timer should wait before the specified function or code is executed. This is great for handling fetch requests and other time consuming processes, but it also gives us a way to tell our app to wait to process certain statements until exactly when we want them to be run. Javascript uses Promises to track the resolution of those background processes, allowing us to set certain statements to run only when a time-consuming process has resolved and returned its completed result. 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

Javascript sleep