Worklet compatible setTimeout and setInterval

[elliotwaite]

From within a worklet, is there a way to call another worklet function after a specified delay, or on a regular interval, similar to how setTimeout() and setInterval() work? I came up with a workaround solution described below, but it seems like there should be a simpler way to do this.

My workaround solution (Snack demo here) was to create four worklet functions similar to setTimeout(), clearTimeout(), setInterval(), and clearInterval(), except instead of the set...() function returning a timeout/interval ID that you pass into the clear...() function, you pass in a shared value of type SharedValue<number> as the first argument to all the functions which acts kind of like that timeout/interval's ID, except it also gets animated from 0 to 1 during the timeout/interval which is convenient in case you want to use it for an animation. Here are the function signatures and the code is below.

• setTimeoutWorklet(sharedValue: SharedValue<number>, callback: () => void, delay: number) => void
• clearTimeoutWorklet(sharedValue: SharedValue<number>) => void
• setIntervalWorklet(sharedValue: SharedValue<number>, callback: () => void, delay: number) => void
• clearIntervalWorklet(sharedValue: SharedValue<number>) => void

function setTimeoutWorklet(
  sharedValue: SharedValue<number>,
  callback: () => void,
  delay: number,
) {
  'worklet'
  sharedValue.value = 0
  sharedValue.value = withTiming(1, { duration: delay }, (success) => {
    if (success) {
      callback()
    }
    sharedValue.value = 0
  })
}

function clearTimeoutWorklet(sharedValue: SharedValue<number>) {
  'worklet'
  sharedValue.value = 0
}

function setIntervalWorklet(
  sharedValue: SharedValue<number>,
  callback: () => void,
  delay: number,
) {
  'worklet'
  sharedValue.value = 0
  sharedValue.value = withRepeat(
    withSequence(
      withTiming(1, { duration: delay }, (success) => {
        if (success) {
          callback()
        }
      }),
      withTiming(0, { duration: 0 }),
    ),
    -1,
  )
}

function clearIntervalWorklet(sharedValue: SharedValue<number>) {
  'worklet'
  sharedValue.value = 0
}

[tonihm96]

Hey! I was looking into the same subject and came across your post.
Based on your example, I made a worklet throttle function:

import { useMemo } from 'react';
import { useSharedValue, withTiming } from 'react-native-reanimated';

export const useAnimatedThrottle = <T extends unknown[]>(callback: (...args: T) => void, delay: number) => {
  const timeout = useSharedValue(0);

  return useMemo(
    () =>
      (...args: T) => {
        'worklet';
        if (timeout.value === 0) {
          timeout.value = withTiming(1, { duration: delay }, (isDone) => {
            if (isDone) {
              callback.apply(null, args);
              timeout.value = 0;
            }
          });
        }
      },
    [callback, delay, timeout],
  );
};

And a worklet debounce function:

import { useMemo } from 'react';
import { cancelAnimation, useSharedValue, withTiming } from 'react-native-reanimated';

export const useAnimatedDebounce = <T extends unknown[]>(callback: (...args: T) => void, delay: number) => {
  const timeout = useSharedValue(0);

  return useMemo(() => {
    const debounced = (...args: T) => {
      'worklet';
      cancelAnimation(timeout);
      timeout.value = 0;
      timeout.value = withTiming(1, { duration: delay }, (isDone) => {
        if (isDone) {
          callback.apply(null, args);
        }
      });
    };

    return debounced;
  }, [callback, delay, timeout]);
};

I needed to create a scroll back to top button, and your post was extremely helpful!

[elliotwaite]

@tonihm96 nice! Thanks for sharing.

[MatiPl01]

Hey!

If you want API more similar to the one from JS and don't want to create the timeout with a hook, here is the implementation of mine I made some time ago. You can check it out:

• timeout
• interval

I also implemented setAnimatedInterval which is similar to JS setInterval.
The implementation uses approach similar to what reanimated does while it executes withTiming and withDelay animations by using the requestAnimationFrame JS function.

[elliotwaite]

@MatiPl01 thanks!