How do you call a asynchronous function using setInterval?

Question

I get a random word and then use the word to generate a GIF. My code here runs for only one time. I want it to generate another word and get another image without refreshing the browser.

So,I have used setInerval();by passing the the function that gets the image using fetch()

const section = document.getElementById('main');
const text = document.querySelector('.word');

let wordurl = 'https://random-word-api.herokuapp.com/word?number=1&swear=0';
let giphyapikey = '*****************';

//Setinterval

setInterval(wordgif(), 5000);


//make WordGIF call
function wordgif() {
    wordGIF().then(results => {
        text.innerHTML = results.word;
        section.innerHTML = `<img src=${results.imgurl}>`;
    }).catch(err => console.error(err))
}
//Async/await
async function wordGIF() {
    let fetchword = await fetch(wordurl);
    let word = await fetchword.json();
    console.log(word)
    let fetchgif = await fetch(`http://api.giphy.com/v1/gifs/search?q=${word}&api_key=${giphyapikey}&limit=1`);
    let gif = await fetchgif.json();
    console.log(gif)
    let imgurl = gif.data[0].images['fixed_height_small'].url;
    return {
        word: word,
        imgurl: imgurl
    }
}

As far as my understanding shouldn't setInterval(wordgif(), 5000); be called every 5 seconds and generate a new word and image? How do you setInterval with asynchronus function?

try `setInterval(wordgif, 5000);` instead `setInterval(wordgif(), 5000);`. does it make difference? — m51, Mar 26 '20 at 17:05
[This post](https://stackoverflow.com/questions/52184291/async-await-with-setinterval) will answer all of your questions. — silencedogood, Mar 26 '20 at 17:06

score 1 · Accepted Answer · answered Mar 26 '20 at 17:11

1

setInterval(wordgif(), 5000);

This code will call wordgif, then pass the result of that function to setInterval. It is equivalent to:

const wordgifResult = wordgif();
setInterval(wordgifResult, 5000);

Since wordgif doesn't return a value, calling setInterval has no real effect.

If you want setInterval to call wordgif, then you need only pass a reference to the function as the argument:

setInterval(wordgif, 5000);

answered Mar 26 '20 at 17:11

JDB

25,172
5
72
123

thanks. That explains why we don't need to call ```wordgif()``` function directly. – wick3d Mar 27 '20 at 12:06

Sajeeb Ahamed · Answer 2 · 2020-03-26T20:51:24.550

I've updated your code a little bit.

You should clear the interval regularly.
You don't need to return anything from the async function, just do what you want to do inside the function.
Must check if the gif file available before rendering it.

const section = document.getElementById('main');
const text = document.querySelector('.word');

let wordurl = 'https://random-word-api.herokuapp.com/word?number=1&swear=0';
let giphyapikey = '62urPH2PxR2otT2FjFFGNlvpXmnvRVfF';

wordGIF(); // can load first gif before interval
//Setinterval
let interval;
if (interval) clearInterval(interval);
interval = setInterval(wordGIF, 5000);

//Async/await
async function wordGIF() {
    let fetchword = await fetch(wordurl);
    let word = await fetchword.json();

    let fetchgif = await fetch(`https://api.giphy.com/v1/gifs/search?q=${word}&api_key=${giphyapikey}&limit=1`);

    let gif = await fetchgif.json();
    
    console.log('Gif available: ' + (gif && Object.keys(gif.data).length > 0));
    
    if (gif && Object.keys(gif.data).length > 0) {
        let imgurl = gif.data[0].images['fixed_height_small'].url;

        text.innerHTML = word;
        section.innerHTML = `<img src=${imgurl}>`;
    }
    
}

.as-console-wrapper {
    max-height: 20px !important;
}

<div id="main"></div>
<div class="word"></div>

Thanks. This made it very clear where I went wrong. – wick3d Mar 27 '20 at 12:08 — wick3d, Mar 27 '20 at 12:08

How do you call a asynchronous function using setInterval?

2 Answers2