Javascript 反应功能未按顺序发生

我遇到的问题是，这组代码需要按顺序执行。它都打包在一个每秒钟更新一次的组件中

以下是我希望在安装组件时发生的情况：

步骤1：加载时，检索存储在本地存储器中的最后一个已知时间戳，并将其减去

new Date（）/1000

，然后控制台记录答案

步骤2：从本地存储和更新状态中检索所有数据（包括时间戳），每秒继续此过程

在我的代码中，步骤2首先发生

这是一个我正在使用的应用程序的视频，该组件每秒都在更新，为我的问题提供上下文。我突出显示我的控制台日志为0。这是我想解决的问题。我需要控制台日志不给我0，而是给我当前时间戳-前一个时间戳。因此，如果使用我的应用程序的用户离线并返回，则会计算他们离开的时间

以下是我当前的代码：

  const exampleComponent = () => {

  const d = new Date() /1000
  
  const timeStamp = () => {
    return Math.round(d)
  }

  const idler = () => {
    return timeStamp() - Lockr.get('timeStamp')
  }
  
  window.onload = (event) => {
     console.log(idler())
  }
 saveLockr(state)

    useEffect(() => {
const timer = setInterval(() => {
setState((state) => ({
  minions: state.minions,
  counter: state.counter + state.minions + (state.minionSupervisors*3) + (state.minionManagers * 9) + 
  (state.grandmas * 18) + 
  (state.dads * 36) + 
  (state.aliens * 72) +
  (state.angels * 144),
  minionSupervisors: state.minionSupervisors,
  minionManagers: state.minionManagers,
  grandmas: state.grandmas,
  dads: state.dads,
  aliens: state.aliens,
  angels: state.angels,
}));
  }, 1000);
  
  return () => {
    clearInterval(timer);
  };
  // eslint-disable-next-line
},[]);
}
    

savelocker挂钩代码：

 const saveLockr = (state) => {
  const d = new Date() /1000
  
  const timeStamp = () => {
    return Math.round(d)
  }

  Lockr.set("counter", state.counter);
  Lockr.set("minions", state.minions);
  Lockr.set("minionSupervisors", state.minionSupervisors);
  Lockr.set("minionManagers", state.minionManagers);
  Lockr.set("grandmas", state.grandmas);
  Lockr.set("dads", state.dads);
  Lockr.set("aliens", state.aliens);
  Lockr.set("angels", state.angels);
  Lockr.set('timeStamp', timeStamp())
  
};
     

---

有几件事。我不知道你在做什么，但你必须知道Javascript是一种异步编程语言。这意味着事情没有按顺序发生。如果一个函数需要时间，Javascript将转到下一个函数。它不会等到第一个函数完成后再转到第二个函数。这使得Javascript非常高效，但给用户增加了一些困难。有几种方法可以解决这个问题。我将文章链接到三种方法

回调：

承诺：

异步/等待：

你可以根据自己的情况选择你喜欢的。最后一行的代码也有问题。

lock.set（'timeStamp'，timeStamp（））
您正在传入timestamp函数。执行此操作时，请从
时间戳中删除
（）
。不管怎样，我希望这有帮助。
我做到了，我做到了，我做到了

以下是我的问题的答案：

使用效果！让我们更深入地了解一下。
我们使用

 useEffect(() => {
    console.log(idler())
  },[])

[]
为我们提供了一个出口，这样在每次组件更新时都不会触发useEffect。
我们仍然需要清理我的
savelocker（state）
hook。让我们把它扔进一个有用的效果中吧

useEffect(() => {
    saveLockr(state);
  })

这次没有
[]
，所以每次我的组件更新时它都会保存状态

useEffects让一切都井然有序，这样我就可以得到我想要的结果

造成这种混乱的原因是我对
[]
在useEffect中的作用缺乏了解，因此我最终没有使用它，或者在我的问题中使用不正确。
请尝试包含一个。如果您使用React，我们这里没有足够的上下文。请不要重新添加
reactjs
标记，直到您将有效的react代码添加到您的问题。添加了useeffect也会导致UpdateLockr内容也是一个副作用。将它们也放入useEffect。您在原始编辑中拥有的几乎所有代码都属于
useEffect
hook，在安装组件时调用，否则都是无意的副作用。Javascript是同步的，但具有异步功能。我怀疑lockr/localStorage的某些功能正在异步处理，所以您需要编写逻辑以同步方式处理此问题，即在继续之前等待任何异步函数完成。这里的
窗口.onLoad
可能也帮不了你。如果我这样做了，它会停止每秒更新所需的useEffect。我只想在加载页面时lock.set（）函数触发之前执行lock.get（）函数。我将包括一个我的应用程序的视频来更好地解释我的难题谢谢你的回答，从时间戳中去掉（）实际上破坏了我的代码并返回了未定义的代码，因为它没有在lock.set（）函数中被调用。在你回复的时候，我在我的OP中添加了更多内容（我想），你链接的这些方法中，我应该尝试哪一种？到目前为止，我尝试了异步，但没有得到任何结果。本地存储访问不是异步的，Lockr也没有提到任何关于异步的内容。这不应该是一个问题。我可能把我的异步放错了位置。我尝试在谷歌上搜索有关在useEffect中使用async await的更多信息，这样也许我可以在
setInterval（）
函数中执行所有操作，但无论我尝试了什么，我总是会出错。我应该在哪里放置async并等待？