如何实现JavaScript中while循环每隔5分钟调用getData()函数？

当前代码会持续高频调用getData()中的API，请求过于密集。需要修改代码，让调用getData()的逻辑每隔5分钟执行一次，同时保留通过localStorage的run状态控制停止的功能。

原代码：

function test(){
  localStorage.setItem('run', "true");
  var loop = 2;
  while (loop > 1) {
    var run = localStorage.getItem('run');
    if (run === "true") {
        //HELP!
        //How can I make this while loop call getData() function every 5 minutes
        getData()
    }else {
        var loop = 0;
    }
  }
  console.log("Completed")
}


function getData(){
  //requesting data etc
  if (data === "abc"){
    localStorage.removeItem('run');
    localStorage.setItem('run', "false");
  }
 return;
}

原代码的while循环是同步阻塞的，会一直占用主线程，不仅无法实现定时调用，还会直接卡死浏览器。要实现定时任务，必须用浏览器提供的异步定时器API（setInterval或setTimeout）。

方案1：使用setInterval（固定间隔定时） #

用setInterval创建一个定时任务，每隔5分钟检查一次run状态，状态为true时调用getData，状态为false时清除定时器并结束任务。

修改后的代码：

function test() {
  localStorage.setItem('run', "true");
  // 5分钟转为毫秒：5 * 60 * 1000 = 300000
  const intervalId = setInterval(() => {
    const run = localStorage.getItem('run');
    if (run === "true") {
      getData();
    } else {
      // 清除定时器，结束任务
      clearInterval(intervalId);
      console.log("Completed");
    }
  }, 5 * 60 * 1000);
  
  // 可选：立即执行一次，无需等5分钟
  if (localStorage.getItem('run') === "true") {
    getData();
  }
}

function getData() {
  // 这里可以是实际的API请求逻辑
  if (data === "abc") {
    localStorage.setItem('run', "false");
  }
}

方案2：使用递归setTimeout（适配异步请求场景） #

如果getData是异步操作（比如API请求），用递归setTimeout可以确保上一次请求完成后，再等待5分钟才发起下一次，避免请求堆积。

修改后的代码：

function test() {
  localStorage.setItem('run', "true");
  
  // 定义定时执行的核心逻辑
  const executeTask = () => {
    const run = localStorage.getItem('run');
    if (run !== "true") {
      console.log("Completed");
      return;
    }
    
    // 调用异步的getData，确保请求完成后再调度下一次
    getData().then(() => {
      setTimeout(executeTask, 5 * 60 * 1000);
    }).catch(err => {
      // 请求出错时仍继续定时（可根据需求调整逻辑）
      setTimeout(executeTask, 5 * 60 * 1000);
      console.error("getData failed:", err);
    });
  };
  
  // 立即启动第一次任务
  executeTask();
}

// 将getData改为异步返回Promise（适配实际API请求场景）
function getData() {
  return new Promise((resolve, reject) => {
    // 模拟API请求过程
    setTimeout(() => {
      const data = "abc"; // 假设请求返回的数据
      if (data === "abc") {
        localStorage.setItem('run', "false");
      }
      resolve();
    }, 1000); // 模拟请求耗时1秒
  });
}

• 必须抛弃同步while循环：浏览器主线程是单线程，同步循环会阻塞所有页面操作，导致页面卡死，根本无法实现定时逻辑。
• 定时器时间单位为毫秒：5分钟换算为5 * 60 * 1000 = 300000毫秒。
• 异步场景优先用递归setTimeout：如果getData是异步请求，setInterval可能会在上一次请求未完成时就发起下一次，导致请求叠加；递归setTimeout能保证任务顺序执行。

内容的提问来源于stack exchange，提问作者CODComputerAtWar