Can not debounce action within other action in Vuex

Question

I'm trying to debounce anything within an Action, it gets swallowed in one way or another...

Take this (pseudo) code:

import { debounce } from "lodash";

const actions = {
  debounceSomeLogging ({ dispatch }, text) {
    console.log("Outside debounced function.");
    debounce(function() {
      console.log("Inside debounced function.");
      dispatch("doRealThing");
    }, 1000);
  },

  doRealThing({ commit }) {
    // Whatever
  }
}

When I call the action, I see the Outside debounced function, but I can not see the other logging and the other action does not get triggered.

Anyone have experience with this and can point me in the right direction?

Armalla

debounce does not run your function but creates a new one which is when called delays the invoking of your inner function. So you need to assign the return value of debounce and call it from somewhere... – Amero

Okay, that seemed to be the problem. Thank you a lot, I will add it as an answer. – Armalla

Answer 1

As nemesv pointed out in a comment, the debounce function does not call the inner function. So you need to call the debounce again, like so:

debounce(function() {
  console.log("Inside debounced function.");
  dispatch("doRealThing");
}, 1000)();

So, in short, it should look like this:

debounce(...)() instead of like this debounce(...).

Armalla

Answer 2

This should definate work

import { debounce } from "lodash";

const actions = {
  debounceSomeLogging: debounce(({ dispatch }, text) => {
    console.log("Inside debounced function.");
    dispatch("doRealThing");
  }, 1000),

  doRealThing({ commit }) {
    // Whatever
  }
}

Posthorse