创建一个函数
startShowingMessage
,它接受两个参数:一个元素和一个 URL 字符串。该函数将使用 setInterval
每 1 秒执行以下任务:获取 URL 并将响应文本放入所提供元素的文本内容中。
我制作了该函数并且获取有效,但我不知道如何在同一函数中设置间隔,而不必调用另一个函数。
async function startShowingMessage(elem, url){
const response = await fetch(url);
const text = await response.text();
elem.textContent = text;
}
由于没有间隔,这些功能只能部分工作。
您可以根据您的需要使用
setInterval
function startShowingMessage(elem, url){
setInterval(async function(){
const response = await fetch(url);
const text = await response.text();
elem.textContent = text;
}, 1000);
}
如果您想了解更多信息这里是 W3Schools
或者可以按照 3limin4t0r 的建议在 MDN 文档 找到官方文档
每 1 秒调用一次该函数:
setInterval(startShowingMessage, 1000);
function startShowingMessage(elem, url) {
setInterval(async () => {
const response = await fetch(url).then(response => response.json())
elem.textContent = response.message
}, 1000)
}
这是另一种方法,它使用动画帧和纪元匹配,而不是
setInterval
。
我们正在寻找这种更新界面的方法,因为它考虑了设备性能,并且可能避免造成冻结和内存泄漏。
/* Timer loop ----------------------------------------*/
let job, origin = new Date().getTime(), i = 0;
const timer = () => {
if (new Date().getTime() - i > origin){
i = i + 2000
fetch("XXXX")
.then(response => response.json())
.then(j => {
// Parse response
})
job = requestAnimationFrame(timer)
} else if (job !== null){
requestAnimationFrame(timer)
}
}
/* Start looping or start again ------------------------*/
requestAnimationFrame(timer)
// Stop the loop
// job = null