vue settimeout 模拟实现 setinterval(带清除定时器的版本)

在Vue.js中，可以使用`$interval`和`$clearInterval`来模拟实现带清除定时器的`setInterval`。下面是一个示例代码：

export default {
  data() {
    return {
      intervalId: null
    };
  },
  methods: {
    startInterval(callback, delay) {
      this.intervalId = setInterval(callback, delay);
    },
    stopInterval() {
      clearInterval(this.intervalId);
    }
  },
  mounted() {
    // 使用示例
    const sayHello = () => {
      console.log('Hello!');
    };

    this.startInterval(sayHello, 1000);

    // 5秒后停止定时器
    setTimeout(() => {
      this.stopInterval();
    }, 5000);
  }
};

在上面的代码中，我们在Vue组件中定义了`intervalId`数据属性来存储定时器的ID。然后，我们定义了`startInterval`方法来启动定时器，接受一个回调函数和延迟时间作为参数，并使用`setInterval`来执行回调函数。同时，我们定义了`stopInterval`方法来停止定时器，使用`clearInterval`方法清除定时器的ID。

在`mounted`生命周期钩子中，我们创建一个名为`sayHello`的回调函数来输出"Hello!"，然后使用`startInterval`方法每隔1秒执行一次该函数。最后使用`setTimeout`来在5秒后调用`stopInterval`方法停止定时器。

请注意，在Vue组件中，我们需要将定时器相关的操作放在适当的生命周期钩子中，以确保在组件销毁时清除定时器，避免内存泄漏。