多区间调用apis Javascript

Question

我有个问题。

当我使用间隔再次调用我的 api 时，一个 30 秒和另一个 14 秒在第一个实例中工作正常，但后来它像图像一样工作，当它应该显示以下内容时。

清除 A（14 秒）清除 A（14 秒）清除 B（30 秒）清除 A（14 秒）清除 A（14 秒）清除 B（30 秒）清除 A（14 秒）清除 A（14 秒）清除 B （30 秒）清除 A（14 秒）清除 A（14 秒）清除 B（30 秒）......这是我的代码。

    useEffect(() => {
    let exchange = []
    const fetchExchange = async () => {
        const binance = await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/binance`)
        const dataBinance = await binance.json()

        const bybit = await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/bybit`)
        const dataBybit = await bybit.json()

        const okex = await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/okex`)
        const dataOkex = await okex.json()

        const bitget = await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/bitget`)
        const dataBitget = await bitget.json()

        const bingx = await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/bingx`)
        const dataBingx = await bingx.json()
        exchange.push(dataBinance, dataBybit, dataOkex, dataBitget, dataBingx)
        setExchangeData(exchange)
    }

    const FetchGasTracker = async () => {
        const gas_tracker = await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/home/fear_greed`)
        const dataGasTracker = await gas_tracker.json()
        setGasTracker(dataGasTracker[0])
    }
    let a = setInterval(() => {
        let date = new Date()
        FetchGasTracker()
        console.log(' Clean a', date.toLocaleTimeString());
        clearInterval(a)
    }, 14000);
    let b = setInterval(() => {
        let date = new Date()
        fetchExchange()
        console.log('Clean B', date.toLocaleTimeString())
        clearInterval(b)
    }, 30000);
}, [exchangeData, gasTracker])

显示这个过程

Answer 1

您将[exchangeData, gasTracker]作为效果 deps 数组，这意味着每次您的代码设置exchangeData或gasTracker时，都会注册新的间隔。 这意味着您可能会设置越来越多的计时器，因为您的影响运行setGasTracker和setExchangeData ，因此这将导致影响再次运行，这将导致更多的计时器等。

你的意思是只使用[]作为 deps 数组，然后让你的间隔运行而不清除（你应该只在卸载 function 中清除它们，我也在下面编辑过）？

    useEffect(() => {
    let exchange = []
    const fetchExchange = async () => {
        const binance = await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/binance`)
        const dataBinance = await binance.json()

        const bybit = await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/bybit`)
        const dataBybit = await bybit.json()

        const okex = await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/okex`)
        const dataOkex = await okex.json()

        const bitget = await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/bitget`)
        const dataBitget = await bitget.json()

        const bingx = await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/bingx`)
        const dataBingx = await bingx.json()
        exchange.push(dataBinance, dataBybit, dataOkex, dataBitget, dataBingx)
        setExchangeData(exchange)
    }

    const FetchGasTracker = async () => {
        const gas_tracker = await fetch(`${process.env.NEXT_PUBLIC_ENDPOINT}/api/home/fear_greed`)
        const dataGasTracker = await gas_tracker.json()
        setGasTracker(dataGasTracker[0])
    }
    let a = setInterval(() => {
        let date = new Date()
        FetchGasTracker()
        console.log(' Clean a', date.toLocaleTimeString());
    }, 14000);
    let b = setInterval(() => {
        let date = new Date()
        fetchExchange()
        console.log('Clean B', date.toLocaleTimeString())
    }, 30000);

    return () => {
       clearInterval(a)
       clearInterval(b)
    }
}, [])