ClearInterval 无论如何都不起作用

Question

我正在尝试在我的电子商务中通过过滤器应用新订单。我需要当执行handleOptionClick函数并且option.value就像代码中一样时，间隔继续执行“CustomOrder”，而当option.value时，它的其他东西会停止间隔。我尝试的事情似乎都不起作用。

  function setOrderCustom(opt){
    const intervaloOrder = setInterval(() => {
      if(opt){
        console.log('execution');
        CustomOrder()

      } else {
        console.log('why doesnt stop??');
        clearInterval(intervaloOrder)
      }
    }, 1000)

  }

  const handleOptionClick = () => {
    console.log('option.value: ', option.value);
    if(option.value === "priceByUnit:asc"){
      //console.log('Ordenamiento custom');
      onItemClick()
      setOrderCustom(true)
    } else {
      setOrderCustom(false)
      onItemClick()
      setQuery({ order: option.value, page: undefined })
    }
  }

我尝试使用 useEffect 来完成此操作，但没有依赖项数组，但什么也没有。

Answer 1

这段代码有很多错误。

1. 首先，您将在单击时创建一个新的间隔，这意味着如果有人单击该按钮 10 次，您将拥有 10 个不同的线程，每个线程运行无限数量的循环。

2. 您的间隔内的代码将连续运行，无法将“opt”更改为 false：

   if(opt){
    console.log('execution');
    CustomOrder()
   
   } else {
    console.log('why doesnt stop??');
    clearInterval(intervaloOrder)
   }
   

上面的代码将继续运行，一遍又一遍。

我认为你想要做的是

return intervaloOrder;

超出你的功能，然后从外部代码中杀死它。