前端点击按钮每秒调用接口的实现方案

2023-09-08 10:05:59

前言

在前端开发中，我们经常需要实现这样的需求：点击某个按钮，每隔一段时间自动触发某个函数或调用某个接口。例如，在一个聊天应用中，我们可能需要实现一个“每隔 5 秒自动刷新聊天记录”的功能。或者，在一个数据监控系统中，我们可能需要实现一个“每隔 10 秒自动拉取最新的数据”的功能。

为了实现这些需求，我们可以使用 JavaScript 中的定时器和事件监听器。定时器可以让我们在指定的间隔时间内执行某个函数，而事件监听器可以让我们在某个事件发生时执行某个函数。

实现方案

1. 使用定时器

使用定时器实现点击按钮每秒调用接口的方法非常简单。我们只需要在按钮的点击事件处理函数中启动一个定时器，然后在定时器的回调函数中调用接口即可。

const button = document.getElementById('button');

button.addEventListener('click', () => {
  const timerId = setInterval(() => {
    // 调用接口
    getProtocolsRequest();
  }, 1000);

  // 停止定时器
  stopChange = () => {
    clearInterval(timerId);
  }
});

2. 使用事件监听器

除了使用定时器，我们还可以使用事件监听器来实现点击按钮每秒调用接口。我们可以先在按钮的点击事件处理函数中注册一个事件监听器，然后在事件监听器的回调函数中调用接口。

const button = document.getElementById('button');

button.addEventListener('click', () => {
  // 注册事件监听器
  window.addEventListener('click', () => {
    // 调用接口
    getProtocolsRequest();
  });
});

// 移除事件监听器
protoChange = () => {
  window.removeEventListener('click', () => {
    getProtocolsRequest();
  });
}