如何使用 setInterval 调用异步函数？答案

【问题标题】：How do you call a asynchronous function using setInterval?如何使用 setInterval 调用异步函数？
【发布时间】：2021-10-23 02:58:48
【问题描述】：

我得到一个随机单词，然后使用该单词生成 GIF。我的代码在这里只运行一次。我希望它在不刷新浏览器的情况下生成另一个单词并获取另一个图像。

所以，我通过传递使用fetch()获取图像的函数来使用setInerval();

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
    }
}

据我的理解不应该 setInterval(wordgif(), 5000); 每 5 秒调用一次并生成一个新单词和图像？异步函数如何设置Interval？

【问题讨论】：

尝试使用setInterval(wordgif, 5000); 而不是setInterval(wordgif(), 5000);。有区别吗？
This post 将回答您的所有问题。

标签： javascript

【解决方案1】：

setInterval(wordgif(), 5000);

此代码将调用wordgif，然后将该函数的结果传递给setInterval。相当于：

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

由于wordgif 没有返回值，所以调用setInterval 没有实际效果。

如果您希望setInterval 调用wordgif，那么您只需传递对函数的引用作为参数：

setInterval(wordgif, 5000);

【讨论】：

谢谢。这就解释了为什么我们不需要直接调用wordgif() 函数。

【解决方案2】：

我已经稍微更新了你的代码。

您应该定期清除间隔。
您无需从async 函数返回任何内容，只需在函数内部执行您想做的事情即可。
在渲染之前必须检查gif 文件是否可用。

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>

【讨论】：

谢谢。这让我很清楚我哪里出错了。