防抖debounce中timestamp取得值为当时按下的时间,如何实现最后一次按下之后再执行

img

我在数字1中加入了防抖去触发’和‘

    watch: {
        num1(newValue) {
            this.debounce(this.changeSum1, 500)()
        }
    },

每次按下时的timestamp的值都是我按下按键的时间,这种情况无论500毫秒后我是否输入完成都会触发时间

我必须把timestamp设置成全局的变量,使用this.timestamp才能实现输入完成后500毫秒之后再执行

debounce = function(func, wait, immediate) {
  var timeout, args, context, timestamp, result;
  var later = function() {
    var last = _.now() - timestamp;
    if (last < wait && last >= 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };
  return function() {
    context = this;
    args = arguments;
    timestamp = _.now();
    var callNow = immediate && !timeout;
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }
    return result;
  };
}

在vue中他每个组件都是一个独立的,所以你要把防抖封装起来使用
定一个一个util.js文件写防抖

//**********************防抖************************//
let timeout = null
let debounce = function(fn, wait) {
  if(timeout !== null) clearTimeout(timeout)
  timeout = setTimeout(fn, wait)
}
//**********************防抖************************//
module.exports = {
    debounce:debounce
};

在需要使用的地方使用

import {debounce} from "util.js"
debounce(()=>{
  代码块
},1000)

  1. 如果你使用的是change事件,那么你怎么确定用户按下的是最后一下?
  2. 1 输入字符串的长度,这个个人感觉不可取
  3. 2 失去焦点的时候,就说明用户输入完成,但是你这样防抖没有意义
  4. 个人感觉可能可以实现的方法
    每次输入都将前一次的倒计时清空,重新给一个500的倒计时,用户输入完成,就会执行最后一个倒计时。