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 上调用组合函数。

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

2 个答案: