首页 > 解决方案 > Lodash Debounce:没有像预期的那样频繁调用

问题描述

根据https://stackoverflow.com/a/41215941/7858768,去抖动函数是在渲染方法之外定义的。debounced 函数被调用,但没有预期的那么频繁。我希望它会在按下按钮时的每一秒左右触发(等待时间设置为 1000 毫秒)。但是,正如您从下面的日志中看到的那样,在触发第一个去抖动打印之前超过 15 秒。

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

依赖:

    "lodash": "^4.17.21",

标签: reactjsreact-nativelodashdebounce

解决方案


推荐阅读