React-native 防止多次点击 Prevent double click

最新推荐文章于 2022-02-24 20:24:02 发布

MINISOCKSS

最新推荐文章于 2022-02-24 20:24:02 发布

阅读量1.5k

点赞数

分类专栏： RN 文章标签： reactjs

本文链接：https://blog.csdn.net/qq_42208442/article/details/108053287

版权

在React-native中，通过state控制按钮禁用状态无法有效防止多次点击问题，因为state更新与render之间存在时间差。为解决此问题，可以自定义函数，利用定时器在设定的时间间隔（如600ms）内确保按钮点击只触发一次函数。

摘要由CSDN通过智能技术生成

在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()
    }
}
*

在这里插入图片描述