項(xiàng)目中經(jīng)常有定時(shí)任務(wù)疯暑，但是不知道在某個(gè)時(shí)間點(diǎn)定時(shí)刷新的需求你們有沒有遇到過砚哗。

現(xiàn)有需求如下：
需要在每日的8點(diǎn)怔揩、12點(diǎn)右蕊、17點(diǎn)刷新頁面某個(gè)部分的數(shù)據(jù)琼稻。
我們在寫代碼的時(shí)候要考慮到這個(gè)時(shí)間點(diǎn)可以是任意時(shí)刻，只有在指定的時(shí)刻才執(zhí)行指定的方法刷新數(shù)據(jù)饶囚。

代碼拿走不謝帕翻，可以直接使用：

<template>
  <div class="hello">
    <h1>js定時(shí)定點(diǎn)刷新demo</h1>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  name: 'testFn',
  data() {
    return {
      timer: null,
    }
  },
  mounted() {
    this.getData()
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
  },
  methods: {
    // 需要刷新的測試方法
    getData() {
      this.timer && clearInterval(this.timer)
      new Promise((resolve, reject) => {
        console.log('數(shù)據(jù)獲取成功鸠补。。嘀掸。')
        resolve()
      }).finally(() => {
        this.intervalFixedPointTaskFn({
          timeFixedArr: ['08:00:00', '12:00:00', '17:00:00'],
          delayTime: 1000
        })
      }, this.getData)
    },
    /**
     * 定點(diǎn)定時(shí)刷新
     * @timeFixedArr：Array<String>需要刷新的時(shí)間點(diǎn)紫岩，格式如['08:30:00','12:00:05']
     * @delayTime: Number 延遲的ms，在固定的實(shí)際點(diǎn)后多少ms內(nèi)都只執(zhí)行一次
     * @tickerFn：需要定時(shí)刷新的方法
     * */
    intervalFixedPointTaskFn({timeFixedArr = [], delayTime = 1000}, tickerFn) {
      let executed = true // true代表需要定時(shí)刷新的方法是否執(zhí)行了,后面縱使在設(shè)定時(shí)間范圍內(nèi)也不執(zhí)行自動(dòng)刷新
      this.timer && clearInterval(this.timer) // 清除定時(shí)器
      this.timer = setInterval(() => {
        console.log('timer...')
        let currentTime = new Date().getTime() // 當(dāng)前時(shí)間
        let currentYMD = moment(currentTime).format('YYYY-MM-DD') // 當(dāng)前年月日
        let refresh = false // 判斷是否需要刷新
        // 判斷是否在設(shè)定的時(shí)間范圍內(nèi)
        let count = 0 // 記錄不在設(shè)定范圍內(nèi)的數(shù)量
        for (let i = 0; i < timeFixedArr.length; i++) {
          let item = timeFixedArr[i] // 固定的時(shí)分秒
          let setTime = new Date(`${currentYMD} ${item}`).getTime() // 完整時(shí)間
          // console.log(executed, 111)
          // console.log(currentTime, setTime, setTime + delayTime)
          // console.log(moment(currentTime).format('YYYY-MM-DD HH:mm:ss'),moment(setTime).format('YYYY-MM-DD HH:mm:ss'),moment(setTime + delayTime).format('YYYY-MM-DD HH:mm:ss'))
          if (currentTime >= setTime && currentTime <= (setTime + delayTime)) { // 沒有刷新過且在設(shè)定時(shí)間范圍內(nèi) - 刷新
            if (!executed) { // 只執(zhí)行一次
              refresh = true
            }
            break
          } else {
            count++
          }
        }

        if (count === timeFixedArr.length) {
          executed = false
        }

        if (refresh) {
          executed = true
          console.log(`${moment(currentTime).format('YYYY-MM-DD HH:mm:ss')} 執(zhí)行定時(shí)任務(wù)....`)
          tickerFn && tickerFn()
        }

      }, 1000)
    }
  }
}
</script>
<style scoped lang="less">
</style>

注意：

intervalFixedPointTaskFn方法的delayTime參數(shù)至少也要是1000毫秒睬塌，因?yàn)?strong>js運(yùn)行機(jī)制泉蝌，代碼執(zhí)行需要時(shí)間，很多時(shí)候代碼執(zhí)行時(shí)的時(shí)間戳不會(huì)剛好和設(shè)定時(shí)間點(diǎn)的時(shí)間戳相等衫仑，因此最好設(shè)置一個(gè)設(shè)定時(shí)間的延長時(shí)間梨与，在設(shè)定時(shí)間到這個(gè)延長時(shí)間范圍內(nèi)堕花，都算做是這個(gè)時(shí)刻文狱，以此保證在這個(gè)時(shí)間點(diǎn)附近一定會(huì)執(zhí)行刷新。
錯(cuò)誤例子如下：

image.png

image.png

打印如下：

image.png

可以看到currentTime和setTime的時(shí)間戳相差76ms缘挽，不相等瞄崇。

若對你有幫助，請點(diǎn)個(gè)贊吧壕曼，謝謝支持苏研！
本文地址：http://www.reibang.com/p/d658abc76325，轉(zhuǎn)載請注明出處腮郊，謝謝摹蘑。