Note: this post was originally published on Medium in November, 2019
Recently, I started building a very basic single page app to illustrate Fetch API usage in a cute and simple way.
When the user clicks a button styled like a tennis ball, a new dog image is fetched from the Dog API, and given a name fetched from the Namey API.
The dog’s image is loaded onto the page, and with each fetch, a name is added onto a list of fetched dogs.
However, once a few dogs were fetched, the document content stretched down quite far, and required a bit of scrolling to view. I decided to add a handy little link in the page footer which would scroll the viewer right up to the top, and re-fire the fetch cycle.
function scrollAndThrow(){
//smooth scroll back to top left corner of window
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
})
// then click the button to trigger a new round of fetch
button.click()
}
We can just scroll up the window, then trigger a newclick event on the button we’ve assigned to the variable button.
However, the the combo of the page scrolling up and the image fetch simultaneously re-firing looks pretty messy.
I wanted a way to slow things down, so the user would only see one thing happening on the page at a time.
I knew that if I could just pause for half a second between the scroll and the API Fetch, everything would look much smoother.
Suddenly, I missed Ruby’s sleep method. It was so nice to be able to schedule events to the exact time I wanted them to run!
I decided there had to be a way to construct my own dupe of that handy little method.
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.).
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.
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.
I realized that I could exploit this functionality by building a Promise around Javascript’s built-in setTimeout() method.
Let’s make a promise:
setTimeout() takes in two parameters:
1: A function to be executed after the timer expires.
2: The time, in milliseconds (thousandths of a second), the timer should wait before the specified function or code is executed. If this argument is omitted, a value of 0 is used, meaning execute “immediately”, or more accurately, as soon as possible. Note that in either case, the actual delay may be longer than intended
return new Promise(resolve => setTimeout(resolve, ms))
We can create a new Promise, and tell setTimeout to pass the Promise resolve statement as setTimeout’s first parameter. setTimeout will delay for ms milliseconds, then resolve the promise. If we throw this in a function, we now have a handle little delay function ready to go!
function sleep(ms) {
// add ms millisecond timeout before promise resolution
return new Promise(resolve => setTimeout(resolve, ms))
}
Great! Now we made our replacement for Ruby’s sleep method.
Now let’s put it to use.
I decided to take advantage of one of ES6’s fresher bits of syntax for Promise handling: Async/await.
async function delayedClick(){
// await sleep function promise
await sleep(700)
// once resolved, click button
button.click()
}
delayedClick() knows from the get that it’s awaiting a promise resolution. We’re using our brand new sleep() function as the awaited promise, passing in our desired number of milliseconds (in this case, 700ms , or 7/10ths of a second ). Once that promise resolves, we can enter the action we want delayedClick() to enact. In this case, we’re going to click the button that re-starts the fetch and display cycle.
Now that we have our delay and desired action plugged into a method, we can plug delayedClick() into our existing scrollAndThrow() method as a replacement to button.click() to slow things down and clean up the onscreen process.
function scrollAndThrow(){
// smooth scroll back to top left corner of window
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
})
// use sleep function promise to initiate 700 millisecond delay
// then click button and initiate new fetch cycle
delayedClick()
}
The result: no more jaggedy mid-scroll fetch return and image load!
Sometimes, it’s just good to get some sleep!
Notes:
- Want to fetch a dog? Check out the repo here.
- For dog pics, I used the Dog API: https://dog.ceo/dog-api/ .
- for random first names, I used the muffinlabs Namey API: https://namey.muffinlabs.com/
- Using Node.js? Turns out that there’s a handy little module built by Wes Bos that keeps this functionality ready to go for you. Check out Waait: https://www.npmjs.com/package/waait.
Top comments (1)
Interesting and helpful, tks🤞