关于定时器（setinterval）和lodash的debounce搭配使用出现的奇怪问题？

Z时代
2024-01-10
分类：技术分享

前提：
页面有一个select和一个input，当这个两个元素的值发生变化时，需要调用ajax函数getDatas去后端获取数据。

需求如下：
1、页面首次加载调用getDatas函数获取数据，然后每隔 60s 自动调用该函数获取一次数据；
2、当页面select或者input发生变化时，立马调用同一ajax函数更新页面数据，并且此操作60s后，才自动调用getDatas函数

解决思路：
1、定义变量timer，利用定时器setinterval来定时执行（60s执行一次）；
1、针对输入框的keyup事件，利用lodash的debounce方法过滤掉密集输入。当然keyup事件触发的时候，设置timer=60——手动获取后60s才自动获取

代码如下：

<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;//当输入框触发keyup事件，确保60s后才自动调用getDatas函数
        var self = this;
        _.debounce(self.getDatas, 2, {//用户输连续入完成之后，才调用getDatas函数
            // 'leading': false,//指定调用在延迟开始前
            'trailing': true, //指定调用在延迟结束后
        })
      },
      getDatas(){
          console.log('获取数据123')
      }
  },
  mounted(){
    this.timer = -1;//首次设置小于0，立马调用getDatas函数
    setInterval(() => {
      this.timer--;
      console.log(this.timer)
      if(this.timer > 0){
      }else{
        this.getDatas();//调用getDatas函数
        this.timer = 60;//重置变量，60s后才能调用getDatas函数
      }
    },1000)
  }
}</script>

问题如下：
1、input的keyup事件触发，但是并没有执行getDatas函数；
2、当操作select和修改input的值后，发现好像有几个定时器在并行执行，截图如下：
图片描述

注：从图片中可以看到，有4、5个定时器在同时执行（图片中的4、5个数字分组后，他们是一次递减的，尽管顺序不规律），请问这两个问题的主要原因在哪儿呢？？

麻烦高手指点，或者给出意见或建议，感谢！

补充：第一个问题我大概知道怎么回事了，因为每次触发keyup都是不停的调用 debounce 包装对象，并不是利用 debounce 包装keyup，但是该如何修改呢？

回答：

<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('获取数据123')
      }
    },
    mounted() {
      this.getDatas()
      this.handleInterval()
    }
  }</script>

回答：

改造了一下，应该好理解吧~

<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    //计时器
let interval = 60000    //计时间隔
export default{
   data(){
      return{
        str: ''
      }
  },
  methods:{
      resetTimer(){
          clearInterval(timer)
          timer = setInterval(this.getDatas, interval)
      },
      changeType(){
          this.getDatas()
      },
      changeStr(){
          this.getDatas()
      },
      getDatas(){
          console.log('获取数据123')
          this.resetTimer()
      }
  },
  mounted(){
      this.getDatas()
      this.changeStr = _.debounce(this.changeStr, 500)
  },
  watch: {
      str (newStr) {
          this.changeStr()
      }
  }
}</script>