Область видимости переменной ES6: невозможно получить доступ к значению внутри функции

Question

Я пытаюсь обработать тайм-аут с момента последнего клика. Моя главная проблема в том, что я не могу получить значение времени ожидания переменной var внутри функции

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>)
}

Answer 1

Это компонент 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 между рендерами, просто дайте мне знать, и я ' напишу пример.