android - react native 使用 debounce 在 android 设备上不起作用

Question

下面的包装器组件在 IOS 上运行良好，但在 Android 上运行时实际上并没有去抖动。即，如果我敲击不透明度，它会产生大量调用

有什么线索吗？

我没能找到任何说它不应该在 Android 上运行的内容

constructor(props) {
  super(props)

  this.onPressDebounced = _.debounce((...params) => this.onPressed(...params), 500, {
    'leading': true,
    'trailing': false
  })
}

onPressed(...params) {
  if (this.props.onPress) {
    this.props.onPress(...params)
  }
}

render() {
  return ( <TouchableHighlight { ...this.props } onPress = { this.onPressDebounced }> {this.props.children} </TouchableHighlight>
  )
}

Answer 1

我今天遇到了这个问题。我找到了一个简单的解决方案来避免触摸弹跳。

所以我在执行核心服务代码之前检查了变量this.lockSubmit。如果它是一个假值，则退出函数，因为这意味着还有另一个未完成的触摸调用。

下一条语句将 this.lockSubmit 设置为 true。

然后我可以在 this.lockSubmit = true 之后执行异步操作或导航操作

服务代码回调或完成后。我将 this.lockSubmit 设置为 false。此语句表示触摸调用已完成。但有时服务代码会很快完成，所以我添加setTimeout来释放这个锁变量延迟。

class PageA extends React.Component {
    // also work well with async function
    onSubmit() {
        if(this.lockSubmit) return;
        this.lockSubmit = true;

        // validate form
        if(this.form.validate()) {
            // jump to another page
            this.props.navigation.push('Uploading');
        }

        this.setTimeout(() => this.lockSubmit = false, 500);
    }

    render() {
        return (
            <TouchableOpacity onPress={this.onSubmit.bind(this)}>
                <Text>Submit</Text>
            </TouchableOpacity>
        );
    }
}