面试题：Solid.js 中组件销毁阶段如何取消定时器

Question

在 Solid.js 组件中，假设你在组件挂载后设置了一个定时器（使用 `setInterval` 或 `setTimeout`），请描述在组件销毁阶段，如何正确取消这个定时器以避免内存泄漏。请给出代码示例说明。

Answer 1

在Solid.js组件中，我们可以使用createEffect和onCleanup来处理定时器的设置与取消。createEffect会在组件挂载时执行，而onCleanup会在组件销毁时执行。

以下是使用setInterval的示例代码：

import { createEffect, onCleanup } from 'solid-js';

function TimerComponent() {
  createEffect(() => {
    const intervalId = setInterval(() => {
      console.log('定时器正在运行');
    }, 1000);

    onCleanup(() => {
      clearInterval(intervalId);
    });
  });

  return <div>带有定时器的组件</div>;
}

以下是使用setTimeout的示例代码：

import { createEffect, onCleanup } from'solid-js';

function TimerComponent() {
  createEffect(() => {
    const timeoutId = setTimeout(() => {
      console.log('定时器触发');
    }, 3000);

    onCleanup(() => {
      clearTimeout(timeoutId);
    });
  });

  return <div>带有定时器的组件</div>;
}

在上述代码中，createEffect在组件挂载时启动定时器，onCleanup在组件销毁时清除定时器，从而避免内存泄漏。