反应中的清除形式 - Javascript

在Javascript的反应中，有一些清除形式可以用来清除不再需要的反应。在这篇文章中，我们将会介绍一些常见的清除形式以及它们的使用场景。

取消setTimeout和setInterval

使用setTimeout和setInterval函数可以在指定的时间间隔后执行一个函数。这个过程是异步的，因此，如果需要在执行前取消这个函数，就需要使用clearTimeout和clearInterval函数。

const timer1 = setTimeout(() => {
  console.log('timer1');
}, 1000);

const timer2 = setInterval(() => {
  console.log('timer2');
}, 1000);

clearTimeout(timer1);
clearInterval(timer2);

取消Promise

在Javascript中，Promise是一种用于异步编程的机制。如果需要取消一个Promise，可以使用AbortController对象。

const { signal, abort } = new AbortController();

const promise = new Promise((resolve, reject) => {
  const timeout = setTimeout(() => {
    resolve('success');
    clearTimeout(timeout);
  }, 1000);

  signal.addEventListener('abort', () => {
    reject('aborted');
    clearTimeout(timeout);
  });
});

promise.then(console.log).catch(console.log);

abort();

在这个例子中，我们创建了一个AbortController对象，并将它的signal对象传递给了Promise构造函数。然后，我们在signal上添加了一个abort事件监听器，并在事件处理程序中调用了reject函数，以取消这个Promise。

取消React的Effect

在React中，我们可以使用useEffect函数来监听组件内部的状态变化，并在状态变化后执行一些操作。当组件被卸载时，React会自动清除useEffect函数，但是如果我们需要在组件未卸载时取消这个函数，则需要在函数中返回一个清除函数。

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(count => count + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <div>{count}</div>;
}

在这个例子中，我们使用useEffect函数来实现每秒钟加一的效果。在函数中，我们创建了一个setInterval函数，并返回了一个函数，这个函数会在组件卸载时调用，用于清除setInterval函数。