useInterval

一个可以处理 setInterval 的 Hook。

基础使用

<template>
  <div class="hello">
    <div>value:{{ data }}</div>
    <button @click="clear">关闭</button>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue';
import { useInterval } from "../../../dist/index.js";


export default {

  setup() {
    const data = ref(1);
    let delay = ref<null | number>(1000);

    useInterval(()=>{
      data.value++
    },delay);

    const clear = ()=>{ 
      delay.value = null;
    };

    return {
      data,
      clear
    };
  },
};
</script>

每1000ms，执行一次，设置delay为null则立即中断

非中断式调用

<script lang="ts">
import { useInterval } from "v3hooks";
export default {

  setup() {
    useInterval(()=>{
      console.log('每 3s 执行一次')
    },3000)
  },
};
</script>

useInterval可以接受一个普通number参数,这样的useInterval可以接受一个普通number参数，不会被中断会一直被执行，谨慎使用！！

Api

interface UseIntervalOptions {
    immediate?: boolean;
}
const useInterval: (
  fn: Fn, 
  delay: number | Ref<number | undefined | null>, 
  options?: UseIntervalOptions | undefined
) => void;

Params

Options

上一页useThrottleFn下一页useTimeout

最后更新于