useIntervalFn让定时更简单

在项目开发中，我们经常遇到需要定时的功能，类似于轮播图的自动播放，倒计时，在js中我们都是使用setInterval来进行，使用clearInterval来清除定时器，但你要是使用的vue框架开发的话，那么就会简单很多，我们可以使用vueuer库里的useIntervalFn来实现

先看一下官网代码

import { useIntervalFn } from '@vueuse/core'

const { pause, resume, isActive } = useIntervalFn(() => {
  /* your function */
}, 1000)

首先是先进行了引入，其中pause是暂停定时器(也相当与是清除)，resume是打开定时器，isActive是看当前定时器是否在执行，在回调函数里可以做出逻辑

另外还要一个options参数的选项immediate和immediateCallback

const{ pause, resume, isActive}= useIntervalFn(() => {
      count.value++
    }, 1000, { immediate: true, immediateCallback: true })

选项对象中的immediateCallback属性表示在定时器开始执行前，是否需要立即调用一次回调函数。默认情况下，immediateCallback为false，即不会在定时器开始前立即执行回调函数。

immediate是否立即开始执行定时器，如果设置为true，则在组件加载完毕后立即开始执行，否则需要手动调用resume()方法开始执行。