關(guān)于定時(shí)器（setinterval）和lodash的debounce搭配使用出現(xiàn)的奇怪問(wèn)題？

前提：
頁(yè)面有一個(gè)select和一個(gè)input，當(dāng)這個(gè)兩個(gè)元素的值發(fā)生變化時(shí)，需要調(diào)用ajax函數(shù)getDatas去后端獲取數(shù)據(jù)。

需求如下：
1、頁(yè)面首次加載調(diào)用getDatas函數(shù)獲取數(shù)據(jù)，然后每隔 60s 自動(dòng)調(diào)用該函數(shù)獲取一次數(shù)據(jù)；
2、當(dāng)頁(yè)面select或者input發(fā)生變化時(shí)，立馬調(diào)用同一ajax函數(shù)更新頁(yè)面數(shù)據(jù)，并且此操作60s后，才自動(dòng)調(diào)用getDatas函數(shù)

解決思路：
1、定義變量timer，利用定時(shí)器setinterval來(lái)定時(shí)執(zhí)行（60s執(zhí)行一次）；
1、針對(duì)輸入框的keyup事件，利用lodash的debounce方法過(guò)濾掉密集輸入。當(dāng)然keyup事件觸發(fā)的時(shí)候，設(shè)置timer=60——手動(dòng)獲取后60s才自動(dòng)獲取

代碼如下：

<template>
  <div>
      <select @change="changeType">
          <option value="11">1111</option>
          <option value="22">2222</option>
          <option value="33">3333</option>
      </select>
      <input type="text" @keyup="changeStr">
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  data(){
      return{
          timer: 0
      }
  },
  methods:{
      changeType(){
          this.timer = 60;
          this.getDatas();
      },
      changeStr(){
        this.timer = 60;//當(dāng)輸入框觸發(fā)keyup事件，確保60s后才自動(dòng)調(diào)用getDatas函數(shù)
        var self = this;
        _.debounce(self.getDatas, 2, {//用戶(hù)輸連續(xù)入完成之后，才調(diào)用getDatas函數(shù)
            // 'leading': false,//指定調(diào)用在延遲開(kāi)始前
            'trailing': true, //指定調(diào)用在延遲結(jié)束后
        })
      },
      getDatas(){
          console.log('獲取數(shù)據(jù)123')
      }
  },
  mounted(){
    this.timer = -1;//首次設(shè)置小于0，立馬調(diào)用getDatas函數(shù)
    setInterval(() => {
      this.timer--;
      console.log(this.timer)
      if(this.timer > 0){
      }else{
        this.getDatas();//調(diào)用getDatas函數(shù)
        this.timer = 60;//重置變量，60s后才能調(diào)用getDatas函數(shù)
      }
    },1000)
  }
}
</script>

問(wèn)題如下：
1、input的keyup事件觸發(fā)，但是并沒(méi)有執(zhí)行getDatas函數(shù)；
2、當(dāng)操作select和修改input的值后，發(fā)現(xiàn)好像有幾個(gè)定時(shí)器在并行執(zhí)行，截圖如下：
圖片描述

注：從圖片中可以看到，有4、5個(gè)定時(shí)器在同時(shí)執(zhí)行（圖片中的4、5個(gè)數(shù)字分組后，他們是一次遞減的，盡管順序不規(guī)律），請(qǐng)問(wèn)這兩個(gè)問(wèn)題的主要原因在哪兒呢？？

麻煩高手指點(diǎn)，或者給出意見(jiàn)或建議，感謝！

補(bǔ)充：第一個(gè)問(wèn)題我大概知道怎么回事了，因?yàn)槊看斡|發(fā)keyup都是不停的調(diào)用 debounce 包裝對(duì)象，并不是利用 debounce 包裝keyup，但是該如何修改呢？

回答

編輯回答

法克魷

改造了一下，應(yīng)該好理解吧~

<template>
  <div>
      <select @change="changeType">
          <option value="11">1111</option>
          <option value="22">2222</option>
          <option value="33">3333</option>
      </select>
      <input type="text" v-model="str">
  </div>
</template>

<script>
import _ from 'lodash'

let timer = null    //計(jì)時(shí)器
let interval = 60000    //計(jì)時(shí)間隔
export default{
   data(){
      return{
        str: ''
      }
  },
  methods:{
      resetTimer(){
          clearInterval(timer)
          timer = setInterval(this.getDatas, interval)
      },
      changeType(){
          this.getDatas()
      },
      changeStr(){
          this.getDatas()
      },
      getDatas(){
          console.log('獲取數(shù)據(jù)123')
          this.resetTimer()
      }
  },
  mounted(){
      this.getDatas()
      this.changeStr = _.debounce(this.changeStr, 500)
  },
  watch: {
      str (newStr) {
          this.changeStr()
      }
  }
}
</script>

2018年8月19日 09:01

編輯回答

墨染殤

<template>
  <div>
    <select @change="changeType">
      <option value="11">1111</option>
      <option value="22">2222</option>
      <option value="33">3333</option>
    </select>
    <input type="text" @keyup="changeStr">
  </div>
</template>

<script>

  export default {
    data() {
      return {
        changeTime: new Date().getTime(),
        interval: null
      }
    },
    methods: {
      changeType() {
        this.handleTimeout()
      },
      changeStr() {
        this.handleTimeout()
      },
      handleTimeout() {
        this.changeTime = new Date().getTime()
        setTimeout(() => {
          if (new Date().getTime() - this.changeTime >= 500) {
            this.getDatas()
            this.handleInterval()
          }
        }, 500)
      },
      handleInterval() {
        clearInterval(this.interval)
        this.interval = setInterval(() => {
          this.getDatas()
        }, 60000)
      },
      getDatas() {
        console.log('獲取數(shù)據(jù)123')
      }
    },
    mounted() {
      this.getDatas()
      this.handleInterval()
    }
  }
</script>

2017年12月18日 18:37