iOS开发知识汇总

React Native 防止重复点击,触发多次事件

2018-05-04  本文已影响7人  fulen

RN的好处在这里就不多做介绍,下面直接看一个bug
一般情况,RN的点击事件如果不做特殊处理话,点击快一点都会出现触发两次或者多次的情况,下面提供一种解决方案,

1、自定义一个js文件 HandlerOnceTap.js

let isCalled = false, timer;  
  
/** 
 * @param functionTobeCalled method 对调函数体
 * @param interval  定时器
 */  
export default HandlerOnceTap = (functionTobeCalled, interval = 600) => {  
    if (!isCalled) {  
        isCalled = true;  
        clearTimeout(timer);  
        timer = setTimeout(() => {  
            isCalled = false;  
        }, interval);  
        return functionTobeCalled();  
    }  
};

2、 在需要使用的地方import 自定义的js文件

import HandlerOnceTap from '../HandlerOnceTap';
// 一定要保证路径的准确性

没有使用之前的代码如下

onPress={() => {
            Alert.alert(
              I18N.t('alert'),
              I18N.t('continue'),
              [
                { text: I18N.t('no'), onPress: () => console.log('Cancel Pressed') },
                { text: I18N.t('yes'), onPress: () => this.selectSession(item.item) },
              ],
              { cancelable: false },
            );
        }}

这种情况下,快速点击按钮会触发两次,导致alert两次,其他场景,比如在push下一个页面的时候也会出现这样的情况,那么我们就可以用下面的方法代替
使用定时器后的方法如下

onPress={() => HandlerOnceTap(() => {
          Alert.alert(
            I18N.t('alert'),
            I18N.t('continue'),
            [
              { text: I18N.t('no'), onPress: () => console.log('Cancel Pressed') },
              { text: I18N.t('yes'), onPress: () => this.selectSession(item.item) },
            ],
            { cancelable: false },
          );
        })}

这样快速点击的时候,就不会出现触发两次的情况了
当然也可以定义一个全局的变量,也能解决push页面的问题,这里不做细致介绍

上一篇 下一篇

猜你喜欢

热点阅读