while 循环在 useEffect 挂钩中不起作用

Posted 2023-03-17

【中文标题】while 循环在 useEffect 挂钩中不起作用

【英文标题】：while loop is not working in useEffect hook

【发布时间】：2021-11-14 19:32:26

【问题描述】：

我想每 7 秒获取一次设备位置设置设置当前位置值的状态。我在 useEffect 钩子中创建了一个 while 循环，并使用 setTimeot 等待 7 秒。但是 while 循环永远不会执行。这种方法有什么问题，我该如何解决？

const sleep = (milliseconds) => 
    setTimeout(() =>  , milliseconds)



const getPosition = () => 
    
        while (true) 
            GetLocation.getCurrentPosition(
                enableHighAccuracy: true,
                timeout: 15000,
            )
                .then(location => 
                    const  latitude, longitude, altitude, accuracy  = location
                    setPosition( lat: latitude, lon: longitude, alt: altitude, acc: accuracy )
                    alert("latitude: " + latitude + "\nlongitude: " + longitude)
                    setLoading(false)
                )
                .catch(err => alert(err))
            sleep(7000)
        
          



useEffect(() => 
    getPosition()

, [])

【参考方案1】：

我不是 100% 了解为什么 whuile(true) 不起作用... 但是你为什么不使用“setTimeout的兄弟”setInterval：

const getPosition = () => 
  GetLocation.getCurrentPosition(
    enableHighAccuracy: true,
    timeout: 15000,
  )
    .then((location) => 
      const  latitude, longitude, altitude, accuracy  = location;
      setPosition(
        lat: latitude,
        lon: longitude,
        alt: altitude,
        acc: accuracy,
      );
      alert('latitude: ' + latitude + '\nlongitude: ' + longitude);
      setLoading(false);
    )
    .catch((err) => alert(err));
;

useEffect(() => 
  const intervalID = setInterval(getPosition, 7*1000);

  // Don't forget to clear the interval when unmounting the component :
  return () => 
    clearInterval(intervalID);
  ;
, []);

【讨论】：

完全按照我的意愿工作。谢谢。

【参考方案2】：

下面是使用setTimeout 的方法。

下面的文章解释了选择一个而不是另一个的一些微妙之处。

TLDR setTimeout 通常是更好的选择

Repeated Events: Timeout or Interval?

const loopInterval = 7*1000;
let loop;

const getPosition = () => 
  GetLocation.getCurrentPosition(
    enableHighAccuracy: true,
    timeout: 15000,
  )
  .then((location) => 
    const  latitude, longitude, altitude, accuracy  = location;
    setPosition(
      lat: latitude,
      lon: longitude,
      alt: altitude,
      acc: accuracy,
    );
    alert('latitude: ' + latitude + '\nlongitude: ' + longitude);
    setLoading(false);
    loop = setTimeout(getPosition, loopInterval);
  )
  .catch((err) => alert(err));
;

useEffect(() => 
  loop = setTimeout(getPosition, loopInterval);
  // Clear the timeout when unmounting the component :
  return () => 
    clearTimeout(loop);
  ;
, []);