JavaScript 点击功能开始和停止间隔

Question

我有两个 onclick 函数，当我单击开始时，它使用套接字执行启动和停止功能，它开始从服务器请求图像（我正在使用间隔）当我单击停止时，服务器已停止，但请求不断到达服务器.点击后间隔似乎没有停止请检查我的代码

代码：

  var interval;
  
  function onclick() {
    interval = setInterval(() => {
      socket.emit("get_image", "Click");
      socket.on('send_image', (message) => {
        setImage(message.image); 
      });
    }, 350)
  }

  function onclicks() {
    clearInterval(interval);
    setImage(blanked);

  }

我尝试添加 clearInterval 函数，但它似乎不起作用

Answer 1

在组件顶层声明的变量在每次渲染时重新声明（此处每次调用 setImage()），因此 interval 在调用 onclicks() 时未定义。

为了通过渲染保持价值，您需要使用 state (useState) or a ref (useRef)，这不会失去它的价值。在这种情况下，由于您不希望渲染附加到 interval 的值，因此 ref 更合适。 useRef() returns 具有 current 属性的对象，您的值将存储在其中。

const interval = React.useRef(null);
  
function onclick() {
  interval.current = setInterval(() => {
    socket.emit("get_image", "Click");
    socket.on('send_image', (message) => {
      setImage(message.image); 
    });
  }, 350);
}

function onclicks() {
  clearInterval(interval.current);
  interval.current = null; // reset the ref
  setImage(blanked);
}

您可能还想避免设置多个间隔。您可能已经这样做了，但如果没有，您可以在设置新值之前检查 interval 是否为 null。

const interval = React.useRef(null);
  
function onclick() {
  if (interval.current === null) { // only set new interval if interval ref is null
    interval.current = setInterval(() => {
      socket.emit("get_image", "Click");
      socket.on('send_image', (message) => {
        setImage(message.image); 
      });
    }, 350);
  }
}

JavaScript 点击功能开始和停止间隔

JavaScript On-click Function to start and stop Intervals

javascript

onclick

setinterval

reactjs