視訊直播系統原始碼，react-hooks的頁面設定定時器

視訊直播系統原始碼，react-hooks的頁面設定定時器

在hooks中設定定時器時，設定變數儲存定時器時最後用：const [timer, setTimer] = useState(null); 這樣方式儲存，否則會導致在使用完定時器，清除定時器，無法清除乾淨，定時器仍然還在，（特別是頁面定時器）

import React, {
  useState,
  useEffect,
} from "react";
const ChallengeModal = (props) => {
  const [timesContent, setTimesContent] = useState("");
  const [timer, setTimer] = useState(null);
 
  const handleCancelStatus = (e) => {
    clearInterval(timer);
  };
 
  const setTime = (val) => {
    let times = val;
    let h = 0,
      m = 0,
      s = 0;
    if (times > 0) {
      h = Math.floor(times / 60);
      m = Math.floor(times) - h * 60;
      s = Math.floor(times * 60) - m * 60;
    }
    if (h <= 9) h = "0" + h;
    if (m <= 9) m = "0" + m;
    if (s <= 9) s = "0" + s;
    if (s === 0) s = "00";
    setTimesContent(h + ":" + m + ":" + s);
  };
  // 造計時器
  const makeTime = () => {
    let  limit_time  =60;
    let times = limit_time * 60;
    // let timer = null;
    const MeTimer = setInterval(() => {
      let h = 0,
        m = 0,
        s = 0;
      if (times > 0) {
        h = Math.floor(times / (60 * 60));
        m = Math.floor(times / 60) - h * 60;
        s = Math.floor(times) - h * 60 * 60 - m * 60;
      }
      if (h <= 9) h = "0" + h;
      if (m <= 9) m = "0" + m;
      if (s <= 9) s = "0" + s;
      setTimesContent(h + ":" + m + ":" + s);
      times--;
      if (times < 0) {
        console.log("122");
        clearInterval(timer);
      }
    }, 1000);
    setTimer(MeTimer);
    console.log("times", times);
   };
   const closeTime =()=>{
   clearInterval(timer);
      setTimer(null);
   }
   useEffect(() => {
    setTime(timer)
   }, []);
  return (
    <div>
     <button onClick={()=>makeTime()}>開啟</button>
     {timesContent}
     <button onClick={()=>closeTime()}>關閉</button>
    </div>
  );
};
export default ChallengeModal;

以上就是 視訊直播系統原始碼，react-hooks的頁面設定定時器，更多內容歡迎關注之後的文章