「React Native」防重复点击事件

问题描述

用户快速点击或者

解决方案

新建CallOnceInInterval.js

let isCalled = false, timer;

/**
 * @param functionTobeCalled 被包装的方法
 * @param interval 时间间隔，可省略，默认600毫秒
 */
export default callOnceInInterval = (functionTobeCalled, interval = 600) => {
    if (!isCalled) {
        isCalled = true;
        clearTimeout(timer);
        timer = setTimeout(() => {
            isCalled = false;
        }, interval);
        return functionTobeCalled();
    }
};

使用方式

使用前

//...
onPress={activityId => navigate('ActivityDetail', {'id': activityId})}
//...

使用后

import callOnceInInterval from '你的路径/CallOnceInterval';

//...
onPress={activityId => callOnceInInterval(() => navigate('ActivityDetail', {'id': activityId}))}
//..