Блог

Как установить интервал в react js в первый раз 0 секунд после 30 секунд?

 //this is my state 
const [state, setState] = useState();
useEffect(() => {
    const interval = setInterval(() => {
    APiResponse();
    }, 30000);
    return () => clearInterval(interval);
}, []);

const APiResponse = () => {
    axios.get(`xxx`).then((res) => {
    setState(res);
    });
};  
  

 

Установите переменную таймера в методе setTimeout над вашим методом равным нулю, чтобы после отображения компонента был вызван жизненный цикл useEffect, а после выполнения вызова установите его на все, что вам нужно;

 let interval;
setTimeout(()=>{

  APiResponse(); // first time zero

 interval = setInterval(() => {
  APiResponse(); // after 30 second

 } ,  30000);
}, 0)

 

Вы можете использовать setTimeout в первый раз. Затем с помощью переменной состояния флага, которая обновляется после первого рендеринга, вы можете начать свой интервал.

   const [state, setState] = useState();
  const [flag, setFlag] = useState(false);
  
useEffect(() => {
    const interval = setTimeout(() => {
     APiResponse();
    }, 0);
    `enter code here`;
  });

  useEffect(() => { if(flag === true){
   const interval = setInterval(() => {
      APiResponse();
    }, 30000);
    return () => clearInterval(interval);
  }
  },[flag]);

  const APiResponse = () => {
    setFlag(true);
    axios.get(`xxx`).then((res) => {
      setState(res);
    });
  };

 

Вы можете использовать приведенный ниже код, идея состоит в том, чтобы немедленно вызвать функцию setInterval обратного вызова один раз и через 30 секунд после этого. Обратите внимание, что это ЖИЗНЬ. таким образом, он не будет помещаться в очередь задач, вместо этого он немедленно запускается (без задержки).

 const [state, setState] = useState();
  useEffect(() => {
    const interval = setInterval(
      (function callApi() {
        APiResponse();
        return callApi;
      })(),
      30000
    );
    return () => clearInterval(interval);
  }, []);

  const APiResponse = () => {
    axios.get(`xxx`).then((res) => {
      setState(res);
    });
  }; 

Я назвал функцию callApi. return callApi; Строка возвращает ту же функцию, мы можем вызвать ее немедленно, а также использовать ее в качестве функции обратного setInterval вызова .