我有两个 onclick 函数,它们使用套接字执行启动和停止功能,当我单击启动时,它开始从服务器请求图像(我正在使用间隔),当我单击停止时,服务器已停止,但请求不断发送到服务器。单击后,间隔似乎没有停止,请检查我的代码
Code:
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函数但它似乎不起作用
在组件顶层声明的变量会在每次渲染时重新声明(这里每次调用setImage()
) so interval
目前尚未定义onclicks()
叫做。
为了通过渲染维持该值,您需要使用state
(useState https://reactjs.org/docs/hooks-reference.html#usestate) or a ref
(useRef https://reactjs.org/docs/hooks-reference.html#useref)这不会失去它的价值。在这种情况下,因为您不希望渲染附加到interval
a ref
更合适。useRef()
返回一个带有 a 的对象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
在设置新值之前是否为空。
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);
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)