An utility method to trigger a function when something changed to a ref, or nothing changed for x seconds

[bobmulder]

Hi all,

I have a usecase where I want to trigger a method when something is added to my ref, or the ref didn't change for x seconds. I asked ChatGPT for a suggestion:

https://chat.openai.com/share/b781d99c-26d2-4cc4-a8dd-f0d7ed88e555

import { ref, watch, onUnmounted } from 'vue';

const myList = ref([]);
let timerId;

function triggerMethod() {
  console.log('Method triggered after 3 seconds of inactivity.');
  // Place your logic here
}

watch(myList, () => {
  clearTimeout(timerId);
  timerId = setTimeout(triggerMethod, 3000);
});

onUnmounted(() => {
  clearTimeout(timerId);
});

I have been looking through the vueuse list, and cant find any utility method which does something like this. Would it be useful to add this to vueuse, or not?

[darrylnoakes]

You (appear to) want "when changed, or no changes for x seconds." Effectively, a watch with a timeout.

That code watches for a change and calls the function 3 seconds later, clearing any previous timeout; effectively, it's a debounced watch: it will only call the function after a change if there have been no more changes in 3 seconds. That (with a max wait, as well) is available in the form of watchDebounced()

I assume you would want to keep triggering after successive timeouts. I.e., trigger every x seconds, or sooner if there is a change.
If not, you would need to state your exact required behavior.

Because of the way the callback is being called, I've made it so that a watch-triggered call has the standard arguments and a timeout-triggered call has the value of the source passed as the first two, and a no-op onCleanup function.
So here's my quick, naive POC:

import {
  watch,
  type Ref,
  type WatchOptions,
} from "vue";

function watchWithPeriod<T>(
  ref: Ref<T>,
  cb: (
    value: T,
    oldValue: T | undefined,
    onCleanup: (cleanupFn: () => void) => void,
  ) => void,
  options: WatchOptions & { period: number },
) {
  let timer: number | undefined = setInterval(
    () => cb(ref.value, ref.value, () => {}),
    options.period,
  );

  watch(
    ref,
    (...args) => {
      clearTimeout(timer);
      timer = setInterval(
        () => cb(ref.value, ref.value, () => {}),
        options.period,
      );

      cb(...args);
    },
    options,
  );
}

It would be used like this:

 import { ref } from "vue";

const msg = ref("");

watchWithPeriod(
  msg,
  (value, oldValue, onCleanup) => {
    if (value !== oldValue)
      console.log("Value changed:", `"${oldValue}"`, `"${value}"`);
    else
      console.log("Interval:", `"${value}"`)
    onCleanup(() => console.log("Cleanup called."));
  },
  { period: 3000 },
);

Vue Playground

[bobmulder]

Thank you for your reply @darrylnoakes. You are right about "when changed, or no changes for x seconds.". For me, using watchDebounced() was not a feasable solution, cause I want to trigger my callback immediately when changed (any time). Maybe I did not understand the watchDebounced() method (eventhough I've been using it for a while).

When would onCleanup be called in your POC? I don't understand its purpose 🙈

[darrylnoakes]

@bobmulder onCleanup is the standard Vue onCleanup function, which is passed as the third argument to a watcher callback.

The callback receives three arguments: the new value, the old value, and a function for registering a side effect cleanup callback. The cleanup callback will be called right before the next time the effect is re-run, and can be used to clean up invalidated side effects, e.g. a pending async request.

I included it to demonstrate that a function registered with it will only be called before a watch-triggered call, not a timer-triggered call.