我正在尝试处理上次点击后的超时。我的主要问题是,我似乎无法在函数的
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>)
}
这是一个 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
变量之间的渲染,只是让我知道,我会写一个例子。