【ReactNative】setTimeoutを複数回実行したとき、前回のsetTimeoutの秒数を上書きしたい

Question

動画のコントローラが表示される実装を以下の通り書いています。

const [secondCall, setSecondCall] = useState(false);
  let timeoutID;

  function offVideoControls() {
    return new Promise(resolve => {
      resolve(setSecondCall(true)); //setStateを確実に実行するためasyinc/await使用
    });
  }

  function callUnified() {
    if (secondCall) {
      return new Promise(resolve => {
        resolve(unified());
      });
    }
  }

  function unified() {
    clearTimeout(timeoutID); //前回のsetTimeoutを初期化
    setSecondCall(false);
  }

  async function threeSecondTimeout() {
    await offVideoControls();
    await callUnified();
    clearTimeout(timeoutID);
    timeoutID = setTimeout(function () {
      setShowVideoControls(false); //ここでコントローラを非表示
    }, 3000);
  }

...略

<View style={{ width: '100%', height: '100%' }}>
　　<TouchableWithoutFeedback
　　　　onPress={() => {
　　　　　　setUpVideoControls();
　　　　　　threeSecondTimeout(); //↑のfunctionを呼び出し
　　　　}}>
　　　　<Text
　　　　　　style={{
　　　　　　　　flex: 1,
　　　　　　}}>
　　　　　　{''}
　　　　</Text>
　　</TouchableWithoutFeedback>
</View>

処理の内容的には

①setTimeoutを消す
②setTimeoutを実行

を実行しているので、何回関数が実行されても前回のsetTimeoutは消え
、毎回一定時間でsetTimeoutが実行されるはずです。

しかし、実際ボタンを連打してみるとsetTimeoutは3秒なのにまばらで実行されます。
コードが安定実行されるように書かれてないためだと思います。

どうすれば{setTimeoutが連打されて実行されても前回のsetTimeoutは消去され、setTimeout`を通常通りに実行できるでしょうか？
上書きが好ましいと考えています。

お力添えいただきますようお願いいたします。

Answer 1

timeoutIDはローカル変数だと思うので、おそらくsetSecondCallが呼ばれた後、再レンダリングが走ってしまい、IDがクリアされているのではないでしょうか？そのため、clearTimeoutでタイマーのクリアがされていないのだと思います。clearTimeoutの呼び出す直前で、console.logを使ってtimeoutIDの値を確認してみてください。多分、timeoutIDがundefinedになっていることが確認できると思います。

解決策としては、useRefでtimeoutIDを作ってやるといいと思います。
これでタイムアウトは止められるようになるのではないでしょうか？

　　　　const [secondCall, setSecondCall] = useState(false);
  const timeoutID　= useRef(null);

  function offVideoControls() {
    return new Promise(resolve => {
      resolve(setSecondCall(true)); //setStateを確実に実行するためasyinc/await使用
    });
  }

  function callUnified() {
    if (secondCall) {
      return new Promise(resolve => {
        resolve(unified());
      });
    }
  }

  function unified() {
    if (timeoutID.current !== null) { // 一応nullチェック
        clearTimeout(timeoutID.current); //前回のsetTimeoutを初期化
        timeoutID.current = null
    }
    setSecondCall(false);
  }

  async function threeSecondTimeout() {
    await offVideoControls();
    await callUnified();
    if (timeoutID.current !== null) {
        // 余談ですけど、unifiedでclearTimeoutされるのでここの処理はいらないと思います
        clearTimeout(timeoutID.current); 
    }
    timeoutID.current = setTimeout(function () {
      setShowVideoControls(false); //ここでコントローラを非表示
    }, 3000);
  }

　　　　...

Comments

[Hinoarashi.]

useStateで再レンダリングを行ってtimeoutIDがundifindになるとは思いもしませんでした。。
console.logでtimeoutIDを調べておけばよかったです。。

useRefは再レンダリングしないのが特徴なのですね、勉強になりました。
次からは状況に応じて使っていきます！

ありがとうございました！期待していた実装ができました！！