ES6变量范围。无法访问函数内的值

问题描述 投票:0回答:1

我正在尝试处理上次点击后的超时。我的主要问题是,我似乎无法在函数的

var timeouts = false;

const lastClickHide = () => {
  // always getting false
  console.log(timeouts);
  timeouts && clearTimeout(timeouts);
  // Reassign `timeouts`
  timeouts = setTimeout(() => console.log('4 seconds since last click'), 4000);
  return timeouts;
}

这就是我试图执行的内容。

  • 第一次执行的功能。var timeouts 获得分配的 timeout

  • 第二次执行的时候。timeout 被保存在 timeouts 以便在已经定义的情况下,我可以清除它,但我无法恢复该值。

完整的代码编辑。

const Player = () => {

// Controls are hidden after 4secs since last click
  var timeouts = false
  const lastClickHide = () => {
    console.log(timeouts)
    timeouts && clearTimeout(timeouts)

    timeouts = setTimeout(() => console.log('4 seconds since last click'), 4000)

    return timeouts
  }

return (<TouchableOpacity
                style={{
                  width: 40,
                  height: 40,
                }}
                onPress={() => {
                  lastClickHide()
                }
              >
                <Icon name={'backward'} color="white" size={40} />
              </TouchableOpacity>)
}
javascript reactjs react-native ecmascript-6
1个回答
0
投票

这是一个 React 组件,并且在每次渲染时都会有 timeouts 变量将被重新声明,这就是为什么你会失去它的值。

最简单的解决办法是将声明移到组件之外。

var timeouts = false; // <-- moved this outside the component

const Player = () => {

// Controls are hidden after 4secs since last click
  const lastClickHide = () => {
    console.log(timeouts)
    timeouts && clearTimeout(timeouts)

    timeouts = setTimeout(() => console.log('4 seconds since last click'), 4000)

    return timeouts
  }
[...]

如果不能接受的话,我们可以考虑使用... useMemo 的值来存储 timeouts 变量之间的渲染,只是让我知道,我会写一个例子。

© www.soinside.com 2019 - 2024. All rights reserved.