📜  js 中的轮询 - Javascript (1)

📅  最后修改于: 2023-12-03 15:02:22.805000             🧑  作者: Mango

JS中的轮询

在JavaScript中,轮询指的是通过定时器周期性地执行某段代码来实现某种功能,例如定期更新数据或者定时执行任务等。

常见的轮询方法
setInterval()

setInterval() 方法会按照给定的时间间隔(单位为毫秒)重复执行一个函数,直到 clearInterval() 被调用或者窗口被关闭。

// 每1000毫秒执行一次
const intervalId = setInterval(function() {
  console.log('Hello interval!');
}, 1000);

// 停止轮询
clearInterval(intervalId);
setTimeout()

setTimeout() 方法在一定的延迟时间后执行一次给定的函数。可以通过递归调用 setTimeout() 实现周期性执行。

// 延迟1000毫秒执行
setTimeout(function() {
  console.log('Hello timeout!');
  // 递归调用
  setTimeout(arguments.callee, 1000);
}, 1000);
requestAnimationFrame()

requestAnimationFrame() 方法通过按照浏览器的重构事件来调用函数,从而在浏览器中实现周期性更新。该方法有助于避免在执行标准的 JavaScript 定时器时可能出现的一些问题。

// 使用 requestAnimationFrame()
function loop() {
  console.log('Hello requestAnimationFrame');
  requestAnimationFrame(loop);
}
// 开始轮询
requestAnimationFrame(loop);
轮询的应用
更新数据

可以使用轮询来更新界面上展示的数据。例如,轮询后端API来获取最新的数据。

// 轮询获取最新的数据
setInterval(function () {
  fetchData();
}, 1000);
定时任务

可以使用轮询来执行定时任务。例如,定期清理缓存或者更新数据。

// 每天晚上9点执行定时任务
const task = setTimeout(function () {
  clearCache();
  updateData();
  clearTimeout(task);
}, new Date().setHours(21, 0, 0, 0) - new Date());

以上是JS中的轮询,它可以帮助解决周期性的问题,并可以轻松地实现定时更新和定时任务等功能。