Question

Vuejs-通过 lodash 进行去抖动，传递“wait”参数

2021-02-05

544

javascript vue.js lodash

我正在尝试创建一种包含去抖动 (使用 Lodash) 的方法，该方法可以动态传递其 wait 参数。

下面是示例代码，我尝试使用输入字段执行此操作 - 每次用户输入时它都会记录“Hit”：

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