useInterval的實(shí)現(xiàn)
場(chǎng)景：
- 登錄互踢：已登錄的情況下臣淤，需要長(zhǎng)輪詢，定時(shí)檢測(cè)當(dāng)前用戶是否被登出
- 動(dòng)畫的場(chǎng)景下：定時(shí)重復(fù)
原理：利用了useEffect窃爷，所有直接使用邑蒋，不用考慮要清除定時(shí)器，用法和setInterval一致
方法：
- 暫停按厘，開啟,医吊，傳入一個(gè)總的執(zhí)行次數(shù)
- 可以隨時(shí)調(diào)整里面的變化的值,也就是調(diào)整進(jìn)度
具體實(shí)現(xiàn)邏輯：
import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";
function Counter() {
const [count, setCount] = useState(0);
const [delay, setDelay] = useState(1000);
const [isRunning, setIsRunning] = useState(true);
useInterval(() => {
setCount(count + 1);
}, isRunning ? delay : null);
function handleDelayChange(e) {
setDelay(Number(e.target.value));
}
function handleIsRunningChange(e) {
setIsRunning(e.target.checked);
}
return (
<>
<h1>{count}</h1>
<input type="checkbox" checked={isRunning} onChange={handleIsRunningChange} /> Running
<br />
<input value={delay} onChange={handleDelayChange} />
</>
);
}
function useInterval(callback, delay) {
const savedCallback = useRef();
// Remember the latest function.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Counter />, rootElement);
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
