是从GitHub根底上批改而来,这个GitHub上的次要代码

import { useEffect, useRef } from 'react';type Delay = number | null;type TimerHandler = (...args: any[]) => void;/** * Provides a declarative useInterval * * @param callback - Function that will be called every `delay` ms. * @param delay - Number representing the delay in ms. Set to `null` to "pause" the interval. */const useInterval = (callback: TimerHandler, delay: Delay) => {  const savedCallbackRef = useRef<TimerHandler>();  useEffect(() => {    savedCallbackRef.current = callback;  }, [callback]);  useEffect(() => {    const handler = (...args: any[]) => savedCallbackRef.current!(...args);    if (delay !== null) {      const intervalId = setInterval(handler, delay);      return () => clearInterval(intervalId);    }  }, [delay]);};export default useInterval;

这个版本其实曾经在大部分状况曾经满足了，然而我这个是在可视化大屏编辑器中的轮播表格组件应用，当大屏拖入大量轮播表格时标签页可能会无响应于是就批改成上面这个版本

import { useEffect, useRef } from 'react'type Delay = number | nulltype TimerHandler = (...args: any[]) => void/** * Provides a declarative useInterval * https://overreacted.io/zh-hans/making-setinterval-declarative-with-react-hooks/ * @param callback - Function that will be called every `delay` ms. * @param delay - Number representing the delay in ms. Set to `null` to "pause" the interval. */const Index = (callback: TimerHandler, delay: Delay) => {  const savedCallbackRef = useRef<TimerHandler>()  useEffect(() => {    savedCallbackRef.current = callback  }, [callback])  useEffect(() => {    if (delay && delay > 10) {      let timeWorker = new Worker(new URL('./worker.js', import.meta.url))      const handler = (...args: any[]) => savedCallbackRef.current!(...args)      timeWorker.postMessage({ action: 'start', time: delay })      timeWorker.onmessage = handler      return () => timeWorker.terminate()    }  }, [delay])}export default Index

worker.js:

function Fn(time = 1000) {  setTimeout(() => {    // eslint-disable-next-line no-restricted-globals    self.postMessage(time)    Fn(time)  }, time)}onmessage = function (e) {  if (e.data.action === 'start') {    Fn(e.data.time)  }}

次要是把setInterval改成了worker,react应用worker的话须要一个worker-plugin