Javascript 每60秒更新一次数据-vanilla js SPA
我有一个函数可以呈现一些html,我不知道如何在这里调用setInterval函数,每60秒调用一次render funcJavascript 每60秒更新一次数据-vanilla js SPA,javascript,Javascript,我有一个函数可以呈现一些html,我不知道如何在这里调用setInterval函数,每60秒调用一次render func const Home = { render: async () => { const cryptos = await getAllCryptos(); const view = ` <section class="section"> <table>
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;
我真的无法将render函数放在setInterval中,所以我想知道最好的方法是什么?事实上,使用setInterval会很混乱,因为渲染涉及异步处理
相反,一系列的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的调用失败也要继续
如果希望从上次调用开始时开始使用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();
事实上,如果渲染涉及异步处理,那么使用setInterval将是混乱的
相反,一系列的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的调用失败也要继续
如果希望从上次调用开始时开始使用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();
@04FS-它只是一个名为render using template literals的异步函数。那都是香草的。React在名称render上没有商标。:-而且它的渲染不是异步的。@t.J.Crowder是的,但是如果他们没有使用任何给定的框架/库,那么我更希望他们知道如何/在哪里/何时调用自己的渲染方法…@NenadVracar-setInterval+async processing=混乱行为:-@NENADRACAR—如果异步处理的时间比间隔长,则间隔计时器将再次触发并启动异步处理,与第一次重叠。第二个调用甚至可以在第一个调用之前完成,从而导致显示过时的结果。在这种情况下,60秒超时的可能性不大,虽然听起来很像著名的临终遗言,但它通常是反模式的。@T.J.Crowder明白了,谢谢。@04FS-它只是一个称为“使用模板文本渲染”的异步函数。那都是香草的。React在名称render上没有商标。:-而且它的渲染不是异步的。@t.J.Crowder是的,但是如果他们没有使用任何给定的框架/库,那么我更希望他们知道如何/在哪里/何时调用自己的渲染方法…@NenadVracar-setInterval+async processing=混乱行为:-@NENADRACAR—如果异步处理的时间比间隔长,则间隔计时器将再次触发并启动异步处理,与第一次重叠。第二个调用甚至可以在第一个调用之前完成,从而导致显示过时的结果。在这种情况下,60秒超时的可能性不大,虽然听起来很像著名的临终遗言,但总的来说这是一种反模式。@T.J.Crowder明白了,谢谢。