const handleSlideLeft = (isFocus: Boolean) => { const Left = setInterval(() => { setOffset(prevOffset => prevOffset - 20); // 向左滑动 100 像素 }, 10); if (isFocus) { Left } else { clearInterval(Left) } };
时间: 2024-02-28 18:53:00 浏览: 169
在这个函数中,`setInterval` 函数会创建一个定时器,并返回一个标识符。在每次定时器触发时,会执行回调函数,这个回调函数中会调用 `setOffset` 来更新状态,实现向左滑动效果。
当 `isFocus` 为真时,会执行 `Left`,也就是启动定时器。当 `isFocus` 为假时,会调用 `clearInterval` 函数来清除定时器,停止向左滑动。
需要注意的是,在这个函数中,`Left` 变量是在 `handleSlideLeft` 函数内部定义的,当函数执行结束后,`Left` 变量会被销毁。因此,在 `isFocus` 为假时,无法通过 `Left` 来清除定时器。正确的做法是在组件的状态中保存 `Left` 变量,并在组件卸载时清除定时器,例如:
```
import React, { useState, useEffect } from 'react';
function MyComponent() {
const [offset, setOffset] = useState(0);
const [leftInterval, setLeftInterval] = useState(null);
const handleSlideLeft = (isFocus: Boolean) => {
if (isFocus) {
const intervalId = setInterval(() => {
setOffset(prevOffset => prevOffset - 20);
}, 10);
setLeftInterval(intervalId);
} else {
clearInterval(leftInterval);
setLeftInterval(null);
}
};
useEffect(() => {
return () => {
if (leftInterval) {
clearInterval(leftInterval);
}
};
}, []);
return <div>{offset}</div>;
}
```
在这个例子中,我们使用 `leftInterval` 状态来保存定时器的标识符。在 `handleSlideLeft` 函数中,我们更新 `leftInterval` 状态,同时在组件卸载时清除定时器。这样可以避免 `clearInterval` 失效的问题。
阅读全文