JS setInterval函数从立即执行到定时执行的三种方案

1、常规操作

首先定义一个需要执行的目标操作函数 target，然后在执行定时器之前先执行函数，再开启定时器：

const target = () => {
  console.log('Do something...')
}

target()
setInterval(target, 1000)

这样看起来没啥问题，但一般我们在使用定时器需要注意：不能让页面产生多个执行同一操作任务的定时器，不然很可能导致你的页面功能异常，并且消耗掉不必要的系统资源，所以需要封装一下：

const target = () => {
  console.log('Do something...')
}

const setIntervalImmediately = (func, interval) => {
  func()
  return setInterval(func, interval)
}

// 定义一个全局的定时器变量timer，用于保存和清除定时器
// 调用之前，检查定时器是否存在，存在则清除
timer && clearInterval(timer)
timer = setIntervalImmediately(target, 1000)

上面 setIntervalImmediately 返回一个定时器，可便于判断清除定时器，保证全局只存在唯一执行同一操作任务的定时器。

2、执行目标函数返回其本身

与【常规操作】中代码看起来比较类似，但注意有很大不同：在调用 setInterval 时传入的第一个参数 target 是加了‘()’的，所以会立即执行 target 函数，执行完后，返回 target 本身（函数名），这个 target （函数名）才是 setInterval 需要接收的真正参数，接下来定时器才算是正常的运行。
这就是为啥要在 target 函数中最后返回其本身的原因了。

const target = () => {
  console.log('Do something...')
  return target
}

// 定义一个全局的定时器变量timer，用于保存和清除定时器
// 调用之前，检查定时器是否存在，存在则清除
timer && clearInterval(timer)
timer = setInterval(target(), 1000)

3、使用立即执行函数

与【执行目标函数返回其本身】处理逻辑一致，唯一不同的只是将 target 函数变成立即执行函数传入到 setInterval 中，在 target 函数中还是会返回其本身。

// 定义一个全局的定时器变量timer，用于保存和清除定时器
// 调用之前，检查定时器是否存在，存在则清除
timer && clearInterval(timer)
timer = setInterval((function target () {
  console.log('Do something...')
  return target
})(), 1000)

4、小结

方案1作为常规方式，更具有易用性，在多人开发合作过程中，比如A封装了 setIntervalImmediately 方法，而 target 函数则是由B开发，那B就不用管 target 函数的返回内容，可以直接拿 setIntervalImmediately 方法过来使用，反观方案2和方案3，限制了 target 函数只能返回其本身，当 target 函数属于公有方法，另有它用，想返回其它内容就不行了，失去了灵活性又增加了耦合度。
所以，常规操作，特别是团队合作中存在共用的，首选方案1，要是自己单独开发自用的则可以考虑方案2或者3。