0

As per https://stackoverflow.com/a/41215941/7858768 the debounced function is defined outside the render method. The debounced function is invoked but not nearly as often as expected. I would expect it to be triggered on around each second of passed time when the button is pressed (with the wait time set to 1000 ms). However, as you can see from the logs below, over 15 seconds pass before the first debounced print is triggered.

import React from 'react';
import { Button, StyleSheet, View, ViewStyle } from 'react-native';
import * as _ from 'lodash';

interface DebounceDemoProps {

}

const debouncedFunc = _.debounce(() => {
  console.log(`DEBOUNCED PRINT`);
}, 1000);

export const DebounceDemo: React.FunctionComponent<DebounceDemoProps> = (props: DebounceDemoProps) => {
  return <View style={styles.viewStyle}>
    <Button title={'Debounce Test'} onPress={() => {
      console.log(`non debounced print.`);
      debouncedFunc();
    }}/>
  </View>;
}

const styles = StyleSheet.create({
  viewStyle: {} as ViewStyle,
});

[Tue Jul 27 2021 21:07:08.505]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:09.271]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:09.883]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:09.884]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:09.884]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:09.957]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:10.183]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:10.350]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:10.518]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:10.695]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:10.861]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:11.270]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:11.207]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:11.374]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:11.540]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:11.719]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:11.888]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:12.550]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:12.221]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:12.398]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:12.557]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:13.472]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:14.395]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:15.110]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:15.518]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:15.728]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:16.234]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:16.484]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:16.780]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:17.268]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:17.446]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:17.990]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:18.325]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:18.706]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:18.953]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:19.148]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:19.616]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:19.808]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:20.101]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:20.321]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:20.521]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:20.722]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:20.888]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:21.760]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:21.270]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:21.463]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:21.660]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:21.864]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:22.250]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:22.213]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:22.399]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:22.758]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:22.946]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:23.149]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:23.329]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:23.529]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:23.730]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:23.917]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:24.114]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:24.275]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:25.348]  LOG      DEBOUNCED PRINT
[Tue Jul 27 2021 21:07:27.358]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:27.542]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:27.916]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:28.942]  LOG      DEBOUNCED PRINT
[Tue Jul 27 2021 21:07:32.322]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:32.938]  LOG      non debounced print.
[Tue Jul 27 2021 21:07:34.560]  LOG      DEBOUNCED PRINT

Dependency:

    "lodash": "^4.17.21",
user7858768
  • 838
  • 7
  • 22
  • 2
    This is how debounce is supposed to work. [Creates a debounced function that delays invoking func until after wait milliseconds have elapsed __since the last time the debounced function was invoked.__](https://lodash.com/docs/#debounce) Are you looking for [throttle](https://lodash.com/docs/#throttle)? – tkausl Jul 27 '21 at 14:18
  • Yes "Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked." so shouldn't the first press invoke the debounced function? And shouldn't it be invoked every about ~1 second since milliseconds since last invokation have elapsed. – user7858768 Jul 27 '21 at 14:25
  • 1
    `so shouldn't the first press invoke the debounced function?` No. `after wait milliseconds have elapsed since the last time the debounced function was invoked.` Your first press starts the 1000ms timer. Your subsequent presses reset the timer. – tkausl Jul 27 '21 at 14:28
  • Ahh makes alot of sense now, since I kept pressing the button it kept reseting the timer. The only weird timestamps to me now are the last `[Tue Jul 27 2021 21:07:32.938] LOG non debounced print. [Tue Jul 27 2021 21:07:34.560] LOG DEBOUNCED PRINT` Since they have ~1.5 seconds between them while the expectation would be to have the second be triggered close to ~1 second. I guess that can be written up to non-deterministic eventuality of timers triggering. – user7858768 Jul 27 '21 at 14:33

0 Answers0