Debounce an autorun callback

help
1

Hey everybody,
are there any implications or side effects that could happen when debouncing an autorun like this?

instance.autorun(_.debounce(() => {
    // Do some stuff here.
    // It works with a reactive data source but we only want to run this
    // when a series of `set` to the ReactiveDict is finished, because we have
    // different places where the data store was changed
}, 200);

I know the design could not be the best one, but we just want to ensure that after a fast sequence of updates we are only calling the autorun code once.

@sashko @benjamn thanks in advance

2

i created a repo for this:

3

Thankyou @lampe.
It’s seems is not working. Could anybody explain why?

4

Probably because that’s not how you’re supposed to use _.debounce :). It returns a debounced function which you then have to call in your autorun handler. Here’s how I would do it:

Template.hello.onCreated(function helloOnCreated() {
  var debouncedFn = _.debounce(() => {
    console.log('with debounce:', counter.get());
  }, 300);

  this.autorun(() => {
    counter.get(); // required to trigger the autorun when counter changes
    debouncedFn();
  });

  this.autorun(() => {
    console.log('without debounce:', counter.get());
  });
});
5

Yeah i see your point, but i cannot find any docs that explain why the other approach is not working. If _.debounce returns a function and we pass this function as the callback, why is that not working?
Just want to know, is not a big problem but i’m courious

6

It doesn’t work, because autorun() checks which reactive data sources are used when it runs for the first time. If you pass debounced function directly to it then no reactive sources will be accessed (because the execution of the code inside _.debounce block is delayed and ran asynchronously) so your code will never be ran again even when reactive source changes.

4 Likes