Vuejs - 通过 lodash 去抖动，传递“等待”参数

Question

我正在尝试制作一个包含去抖动的方法（使用 Lodash），它可以动态传递其 wait 参数。

这是我尝试使用输入字段执行此操作的示例代码 - 每次用户进行输入时它都会记录“命中”：

<template>
  <div id="app">
    <input @input='validateInput1(400)'>
  </div>
</template>

<script>
import _ from 'lodash';

export default {
  name: "App",
  data() {
    return {

    };
  },
  methods: {
    validateInput1: _.debounce(function() {
      console.log('Hit 1!');
    }, 400),
    validateInput2(delay = 1000) {
        function test() {
          console.log('Hit 2!');
        }
        const doDebounce = _.debounce(test, delay);
        doDebounce();
    }
  }
};
</script>

https://codesandbox.io/s/eloquent-wescoff-hs8wi?file=/src/App.vue

我正在尝试两种不同的方法来实现这一目标。使用 validateInput1 方法，我看不到如何传入 wait 参数。

使用 validateInput2 方法，我可以传入 wait 参数，但是外部的 validateInput2 方法在我需要输入时立即运行整个方法通过 wait 运行。 validateInput1 方法在延迟后运行整个方法，但我无法通过 validateInput1 传入 wait 参数。

Answer 1

虽然代码本身看起来很丑陋，但它可以正常工作。

<template>
  <div id="app">
    <input @input="validateInput2(10)" />
  </div>
</template>

<script>
import _ from "lodash";

export default {
  name: "App",
  data() {
    return {
      debounce: null,
    };
  },
  methods: {
    validateInput2(delay = 1000) {
      if (this.debounce) {
        return this.debounce();
      }

      const deb = _.debounce(function test() {
        console.log("Hit 2!");
      }, delay); // I want to reuse it
      this.debounce = deb;
      return deb();
    },
  },
};
</script>

虽然我确实理解将延迟超时放在模板中而不是脚本中看起来更清楚，但我的回答肯定比您拥有的validateInput1 解决方案更糟糕。

但无论如何，如果您能想到如何创建更好、更清洁的解决方案，请随时与我们分享。

Answer 2

实现此目的的一种（快速）方法是返回一个函数：

validateInput2(delay = 1000) {
  function test() {
    console.log('Hit 2!');
  }
  const doDebounce = _.debounce(test, delay);
  return doDebounce;
}

然后在你的模板中：

<input @input="validateInput2(400)()" />

它的作用：第一次调用发送延迟。其次是在@input 上调用组合函数。