在函数中使用设置间隔和获取

Question

创建一个函数

startShowingMessage

，它接受两个参数：一个元素和一个 URL 字符串。该函数将使用

setInterval

每 1 秒执行以下任务：获取 URL 并将响应文本放入所提供元素的文本内容中。

我制作了该函数并且获取有效，但我不知道如何在同一函数中设置间隔，而不必调用另一个函数。

async function startShowingMessage(elem, url){
  const response = await fetch(url);
  const text = await response.text();
  elem.textContent = text;
}

由于没有间隔，这些功能只能部分工作。

Answer 1

您可以根据您的需要使用

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 文档 找到官方文档

Answer 2

每 1 秒调用一次该函数：

setInterval(startShowingMessage, 1000);

Answer 3

function startShowingMessage(elem, url) {
  setInterval(async () => {
    const response = await fetch(url).then(response => response.json())
    
    elem.textContent = response.message
  }, 1000)
}

Answer 4

这是另一种方法，它使用动画帧和纪元匹配，而不是

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