博客

在react-native, 想通过state来设置button是否disable， 以此来达到防止多次快速点击引起的多次触发function调用， 我在试验了多次之后发现， 只要是state来控制， 都是不能做到真正的防止多次点击。

通过State来设置button disable的状态， 这个render本身就需要时间， 如果你的function中有多次设置state， 因为react的机制， 会等到后面统一render。 所以其实在button 被disable之前， 还是可以做到多次点击。

这个在debug 模式下可以观察的很清楚，在function中下一个断点， 快速多次点击button， 你会看到断点会连续走过几遍。

为了解决这个问题， 可以自定义一个function来控制一段时间内多次点击button只触发一次function。

*
let isCalled = false
let timer
export const preventDoubleClick = (functionTobeCalled, interval = 600) => {
    if (!isCalled) {
        isCalled = true
        clearTimeout(timer)
        timer = setTimeout(() => {
            isCalled = false
        }, interval)
        return functionTobeCalled()
    }
}
*

这里， 通过一个timer 来延迟执行function， 如果在interval时间内（600ms）多次点击button， 因为iscalled 只会执行一次function。当然， 大家也可以视自己项目而定设置符合自己的interval 时间。

调用preventDoubleClick：

<View style={styles.nextView}>
	<PrimaryButton
		text={content.next}
		disabled={this.state.nextDisabled}
		onPress={() => preventDoubleClick(this.nextButton)}
	/>
</View>