我有这个函数渲染一些html,我不知道如何在这里调用setInterval函数,每隔60秒调用一次渲染函数
const Home = {
render: async () => {
const cryptos = await getAllCryptos();
const view = `
<section class="section">
<table>
${cryptos.data.map(crypto =>
`<tr>
<td class="name"><a href="/src/#/crypto/${crypto.id}">${crypto.name}</a> </td>
<td>${crypto.symbol}</td>
<td>${crypto.quote.USD.price}</td>
<td>${crypto.quote.USD.percent_change_24h}</td>
</tr>`
)}
</table>
</section>
`;
return view
}
};
export default Home;
我真的不能把渲染功能放在setInterval
里面,所以我想知道最好的方法是什么?
事实上,鉴于setInterval
涉及异步处理,使用render
会很混乱。
相反,一系列链接的setTimeout
可能是最好的:
const RENDER_INTERVAL = 60000; // 60 seconds in milliseconds
function handleRender() {
Home.render()
.then(html => {
// ...use the HTML...
})
.catch(error => {
// ...report the error...
})
.finally(scheduleRender);
}
function scheduledRender() {
setTimeout(handleRender, RENDER_INTERVAL);
}
该代码假设您希望继续,即使对Home.render
的一次调用失败。
如果你想从最后一次调用render
开始使用60秒而不是结束(上面是60秒),你会做更多的逻辑:
const RENDER_INTERVAL = 60000; // 60 seconds in milliseconds
let lastRenderStart = 0;
function handleRender() {
lastRenderStart = Date.now();
Home.render()
.then(html => {
// ...use the HTML...
})
.catch(error => {
// ...report the error...
})
.finally(scheduleRender);
}
function scheduledRender() {
setTimeout(handleRender, Math.max(0, RENDER_INTERVAL - (Date.now() - lastRenderStart));
}
handleRender();