vue写一个setTimeout的递归函数

好的，这是一个简单的递归函数，用于模拟 setInterval 的效果。

function timer(fn, delay) {
  let timeoutId;

  function tick() {
    fn();
    timeoutId = setTimeout(tick, delay);
  }

  tick();

  return {
    cancel: () => {
      clearTimeout(timeoutId);
    }
  };
}

你可以像这样使用它：

const { cancel } = timer(() => {
  console.log('tick');
}, 1000);

// 在某个时候取消
cancel();

相关问题

vue settimeout代替setinterval

在Vue.js中，如果你需要间隔一段时间执行某个操作，你可以使用setInterval()函数，但是存在一些问题。当使用setInterval()时，代码会每个指定时间被重复执行，这可能会导致卡顿和性能问题。因此，更好的解决方案是使用setTimeout()函数来代替setInterval()。

setTimeout()函数在指定的时间间隔之后执行一次代码。因此，如果你需要在一段时间后重复执行某个操作，可以使用递归函数实现setTimeout()的循环调用。这种方法具有更好的性能，因为代码只会在指定的时间间隔之后被执行一次，这可以减少不必要的计算和减少性能问题。

另外，setTimeout()函数还可以使用Vue.js的生命周期钩子函数来执行指定的操作。在创建Vue.js应用程序时，你可以设置一个定时器，以在一段时间后触发指定的事件。例如，在mounted钩子函数中，你可以设置一个定时器，以在组件挂载后一定的时间调用某个函数。

综上所述，使用setTimeout()函数代替setInterval()函数可以提高Vue.js应用程序的性能和流畅度，同时还可以使代码更加简洁和易于维护。

用vue做一个延时按键勾选 按键 延时做4行 运行和停止就一个，当勾选中后 按键框内的按键每一个延时按一次，4个按键同时运行，比如 第一行按1，延时100MS，第二行按2，延时200ms 第三行不选中 第四行按4延时300MS，那么每100ms按一下1，每200ms按一下2，各行不冲突，按停止就全停了

好的，我来解答你的问题。

首先，你可以使用Vue框架来实现这个延时按键勾选功能。在Vue中，你可以使用v-model来绑定勾选框的状态，使用v-for来遍历4行按键框。然后，你可以使用setTimeout函数来实现延时功能，当按键被勾选时，你可以将对应的按键信息存储到一个数组中，然后使用递归函数来实现按键的延时执行。最后，你可以使用一个按钮来控制所有按键的开始和停止。

下面是一个简单的Vue组件示例代码，你可以参考一下：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <input type="checkbox" v-model="item.checked">{{ item.value }}
      <button v-if="item.checked" @click="start(index)">开始</button>
      <button v-if="item.checked" @click="stop(index)">停止</button>
    </div>
    <button @click="stopAll">全部停止</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { value: '1', checked: false, timer: null },
        { value: '2', checked: false, timer: null },
        { value: '3', checked: false, timer: null },
        { value: '4', checked: false, timer: null }
      ]
    }
  },
  methods: {
    start(index) {
      const item = this.items[index]
      item.timer = setTimeout(() => {
        // 模拟按键按下的操作
        console.log(`按下 ${item.value}`)
        this.start(index)
      }, (index + 1) * 100)
    },
    stop(index) {
      clearTimeout(this.items[index].timer)
    },
    stopAll() {
      this.items.forEach(item => {
        if (item.timer) {
          clearTimeout(item.timer)
          item.timer = null
        }
      })
    }
  }
}
</script>

在这个示例中，我们创建了一个items数组来存储4个按键的信息。每个按键都有一个value属性表示按键的值，一个checked属性表示按键是否被勾选，一个timer属性表示按键的计时器对象。在模板中，我们使用v-for来遍历items数组，并使用v-model来绑定勾选框的状态。在每个按键框中，我们添加了一个开始按钮和一个停止按钮，只有当按键被勾选时才会显示。点击开始按钮时，我们使用setTimeout函数来实现按键的延时执行，并将计时器对象存储到item.timer中。点击停止按钮时，我们使用clearTimeout函数来停止计时器。点击全部停止按钮时，我们遍历items数组，停止所有计时器。

需要注意的是，这个示例只是一个简单的演示，实际开发中还需要处理各种异常情况，例如用户重复点击开始按钮、勾选框状态改变等。同时，按键的延时时间也应该根据实际需求进行调整。