独立触发两次去抖功能

Question

我已经声明了“服务”：

// myService.js
export default {
  someService: _.debounce(
    function  someService(rule, value, callback) {
      myApi.get(
        `check-input/${value}`,
      )
      .then((response) => {
        if (response.data.valid) {
          callback();
        } else {
          callback(new Error('Invalid value'));
        }
      })
      .catch(() => {
        callback(new Error('Internal error. Please try later.'));
      });
  },2000)};

我想同时独立使用此服务两次。

我这样调用这个服务：

const ValidatorA = (rule, value, callback) => {
  const serviceA = myService.someService(rule, value, callback);
  return serviceA;
};

const ValidatorB = (rule, value, callback) => {
  const serviceB = myService.someService(rule, value, callback);
  return serviceB;
};

ValidatorA 和ValidatorB 链接到模板中的不同输入，并且几乎同时运行。 （延迟 1 秒）

我想要实现的是ValidatorA和ValidatorB会独立调用myService.someService，所以应该同时有两个调用。目前它只调用一次（来自ValidatorB，因为它在一秒钟后被调用）。我想ValidatorB 正在覆盖来自ValidatorA 的调用。

创建两个相同的方法可以解决这个问题，但是我相信还有更优雅的解决方案。 Object.assign 或 _deepClone 也没有解决问题。

谢谢！

Answer 1

我认为你可以将someServices 包装在一个函数中

export default {
    getServices: function() {
      return 
        _.debounce(
        function  someService(rule, value, callback) {
          myApi.get(
            `check-input/${value}`,
          )
          .then((response) => {
            if (response.data.valid) {
              callback();
            } else {
              callback(new Error('Invalid value'));
            }
          })
          .catch(() => {
            callback(new Error('Internal error. Please try later.'));
          });
      },2000)
     }
};

然后

const ValidatorA = (rule, value, callback) => {
  const serviceA = myService.getServices()(rule, value, callback);
  return serviceA;
};

const ValidatorB = (rule, value, callback) => {
  const serviceB = myService.getServices()(rule, value, callback);
  return serviceB;
};