Flash setInterval 问题

Posted 2023-05-07

如果我在一帧中使用setInterval函数对于本帧内的对象进行操作（无stop语句还其他跳转语句），那么flash会一直停留在此帧上进行setInterval的操作还是会继续进行下帧。

这要视你的影片结构而定，如果你的影片只有一帧，那么该影片是不会做循环播放的，也就是说写在这帧的脚本只执行一遍然后就完了，如果你写的是setInterval语句，那么就只执行一次这语句，然后就定时调用设置的操作。
如果你的影片有多帧的话，在没有写stop的情况下就会循环执行了影片帧的脚本了。也就是说会多次执行你写的setInterval语句。
这个其实你可以用trace来输出一下信息也可以知道。 参考技术A 如果用了setInterval,只要不清除就一直有效

没有STOP当然会继续一下帧，setInterval只是循环调用函数

Fetch 和 setInterval 反应钩子问题

【中文标题】Fetch 和 setInterval 反应钩子问题

【英文标题】：Fetch and setInterval react hooks problem

【发布时间】：2021-01-16 12:49:03

【问题描述】：

我最近使用带有 React 的钩子从服务器获取数据，但我遇到了钩子问题。代码看起来是正确的，但看起来 useEffect 不是第一次调用而是在 setInterval 3 秒后调用。在它出现之前，我有 3 秒钟的空白表。我想直接显示数据，3秒后调用。

正确的使用方法是什么？

const [datas, setDatas] = useState([] as any);

  useEffect(() => 
    const id = setInterval(() => 
        const fetchData = async () => 
          try 
            const res = await fetch(URL);
            const json = await res.json();
            setDatas(jsonData(json));
           catch (error) 
            console.log(error);
          
        ;
        fetchData();
    , TIME)

    return () => clearInterval(id);
  , [])

【参考方案1】：

使用 React Hooks：

  const [seconds, setSeconds] = useState(0)

  const interval = useRef(null)

  useEffect(() =>  if (seconds === 60) stopCounter() , [seconds])

  const startCounter = () => interval.current = setInterval(() => 
    setSeconds(prevState => prevState + 1)
  , 1000)

  const stopCounter = () => clearInterval(interval.current)

【参考方案2】：

您需要在初始时间在间隔之外调用一次fetchData。在区间外定义fetchData。

useEffect(() => 
  // (1) define within effect callback scope
  const fetchData = async () => 
    try 
      const res = await fetch(URL);
      const json = await res.json();
      setDatas(jsonData(json));
     catch (error) 
      console.log(error);
    
  ;
    
  const id = setInterval(() => 
    fetchData(); // <-- (3) invoke in interval callback
  , TIME);

  fetchData(); // <-- (2) invoke on mount

  return () => clearInterval(id);
, [])