h5点击按钮之后按钮消失_1行代码，搞定按钮重复点击难题

也许有些人会纳闷&＃xff0c;老哥&＃xff0c;你这么简单的功能还需要写博客吗&＃xff1f;是游戏不好玩呢&＃xff1f;还是妹子不好撩啊&＃xff1f;

这位兄台&＃xff0c;你回答的真是太对了&＃xff0c;这年头游戏太烧钱&＃xff0c;撩妹子比改bug还难。。。

App中&＃xff0c;有很大一部分场景是点击按钮&＃xff0c;向服务端提交数据&＃xff0c;由于网络请求需要时间&＃xff0c;用户很可能会多次点击&＃xff0c;造成数据重复提交&＃xff0c;造成各种莫名其妙的问题。

同时如果你是hmi开发&＃xff0c;在很多时候也需要此项操作。

因此&＃xff0c;防止按钮多次点击&＃xff0c;是Android开发中一个很重要的技术手段。

以前的处理方式

网上查找到的&＃xff0c;或者你可能会想到的方法大概有这些&＃xff1a;

1.每个按钮点击事件中&＃xff0c;记录点击时间&＃xff0c;判断是否超过点击时间间隔

private long mLastClickTime &＃61; 0;
public static final long TIME_INTERVAL &＃61; 1000L;
private Button btTest;
private void initView() {
    btTest &＃61; findViewById(R.id.bt_test);
    btTest.setOnClickListener(new View.OnClickListener() {
        &＃64;Override
        public void onClick(View v) {
            long nowTime &＃61; System.currentTimeMillis();
            if (nowTime - mLastClickTime > TIME_INTERVAL) {
                // do something
                mLastClickTime &＃61; nowTime;
            } else {
                Toast.makeText(MainActivity.this, "不要重复点击", Toast.LENGTH_SHORT).show();
            }
        }
    });
}


这种方式&＃xff0c;每个点击事件都需要写一个时间判断&＃xff0c;重复代码很多。

2.封装一个点击事件&＃xff0c;处理点击间隔判断

public abstract class CustomClickListener implements View.OnClickListener {
    private long mLastClickTime;
    private long timeInterval &＃61; 1000L;

    public CustomClickListener() {

    }

    public CustomClickListener(long interval) {
        this.timeInterval &＃61; interval;
    }

    &＃64;Override
    public void onClick(View v) {
        long nowTime &＃61; System.currentTimeMillis();
        if (nowTime - mLastClickTime > timeInterval) {
            // 单次点击事件
            onSingleClick();
            mLastClickTime &＃61; nowTime;
        } else {
            // 快速点击事件
            onFastClick();
        }
    }

    protected abstract void onSingleClick();
    protected abstract void onFastClick();
}


使用&＃xff1a;

btTest.setOnClickListener(new CustomClickListener() {
    &＃64;Override
    protected void onSingleClick() {
        Log.d("xxx", "onSingleClick");
    }

    &＃64;Override
    protected void onFastClick() {
        Log.d("xxx", "onFastClick");
    }
});


相比于第一种方式&＃xff0c;这种方法将重复点击的判断封装在CustomClickListener内部&＃xff0c;外部无需处理时间判断&＃xff0c;只需要实现点击方法即可。

3.利用RxAndroid处理重复点击

RxView.clicks(view)
    .throttleFirst(1, TimeUnit.SECONDS)
    .subscribe(new Consumer() {&＃64;Overridepublic void accept(Object o) throws Exception {// do something
        }
     });

响应式地处理按钮点击&＃xff0c;利用rxjava的操作符&＃xff0c;来防止重复点击&＃xff0c;相较于第1,2方案来说&＃xff0c;此方法更为优雅一些。

偷懒的方式

作为程序员&＃xff0c;我们要学会偷懒&＃xff0c;能少写的绝不多写&＃xff0c;因此我封装成了一个工具类&＃xff0c;同时考虑到后面有更好的实现方式&＃xff0c;在尽可能小的情况下改动代码&＃xff1b;或者每个按钮的点击间隔不一样呢&＃xff1f;

1.首先定义一个接口

public interface ViewClick extends View.OnClickListener {

    void throttle(long skipDuration, TimeUnit timeUnit);

}


2.Android原生的实现方式

public class ViewClickImp implements ViewClick {

    private View mView;
    private View.OnClickListener mOnClickListener;
    private long mOldTime;
    private long mDelayMilliseconds &＃61; 1000;

    public ViewClickImp(View view, View.OnClickListener onClickListener) {
        RxUtil.requestNoNull(view, "view in null");
        RxUtil.requestNoNull(onClickListener, "onClickListener in null");
        mView &＃61; view;
        mOnClickListener &＃61; onClickListener;
        mView.setOnClickListener(this);
        LogUtil.logD("ViewClick ViewClickImp: ");
    }

    &＃64;Override
    public void onClick(final View v) {
        // 考虑到用户手动修改系统时间&＃xff0c;所以要使用以下方式
        long nowTime &＃61; SystemClock.elapsedRealtime();
        long intervalTime &＃61; nowTime - mOldTime;
        if (mOldTime &＃61;&＃61; 0 || intervalTime >&＃61; mDelayMilliseconds) {
            mOldTime &＃61; nowTime;
            mOnClickListener.onClick(v);
        }
    }

    &＃64;Override
    public void throttle(long skipDuration, TimeUnit timeUnit) {
        if (skipDuration 0) {
            skipDuration &＃61; 0;
        }
        RxUtil.requestNoNull(timeUnit, "timeUnit in null");
        mDelayMilliseconds &＃61; timeUnit.toMillis(skipDuration);
    }
}


需要注意:   System.currentTimeMillis()受系统时间的影响&＃xff0c;因此在这里要用SystemClock.elapsedRealtime()

3.RxJava的实现方式

public class RxViewClickImp implements ViewClick {

    private View mView;
    private View.OnClickListener mOnClickListener;
    private long mSkipDuration;
    private TimeUnit mTimeUnit &＃61; TimeUnit.MILLISECONDS;
    private ObservableEmitter mObservableEmitter;
    private Observable mObservable;

    public RxViewClickImp(View view, View.OnClickListener onClickListener) {
        RxUtil.requestNoNull(view, "view in null");
        RxUtil.requestNoNull(onClickListener, "onClickListener in null");
        mView &＃61; view;
        mOnClickListener &＃61; onClickListener;
        mView.setOnClickListener(this);
        LogUtil.logD("ViewClick RxViewClickImp: ");
    }

    &＃64;Override
    public void onClick(final View v) {
        if (mObservable &＃61;&＃61; null) {
            mObservable &＃61; Observable.create(new ObservableOnSubscribe() {&＃64;Overridepublic void subscribe(final ObservableEmitter emitter) throws Exception {
                    mObservableEmitter &＃61; emitter;
                }
            });
            throttleFirst(mObservable);
        }
        mObservableEmitter.onNext(mView);
    }&＃64;Overridepublic void throttle(long skipDuration, TimeUnit timeUnit) {
        mSkipDuration &＃61; skipDuration;
        mTimeUnit &＃61; timeUnit;
    }private void throttleFirst(Observable observable) {
        observable.throttleFirst(mSkipDuration, mTimeUnit)
                .subscribe(new Consumer() {&＃64;Overridepublic void accept(View view) throws Exception {
                        mOnClickListener.onClick(view);
                    }
                });
    }
}

需要注意:在RxViewClickImp对象内只能有一个Observable和ObservableEmitter&＃xff0c;不然你会发现设置是无效的

4.ViewClickUtil的实现

1.点击事件

    public void clicks(View.OnClickListener onClickListener, View view) {
        switch (mType) {
            case RX_VIEW:
                mViewClick &＃61; new RxViewClickImp(view, onClickListener);
                break;
            case VIEW:
                mViewClick &＃61; new ViewClickImp(view, onClickListener);
                break;
        }
        mViewClick.throttle(mSkipDuration, mTimeUnit);
    }

    public void clicks(View.OnClickListener onClickListener, View... views) {
        for (View view : views) {
            clicks(onClickListener, view);
        }
    }


2.build

  private ViewClickUtil(Builder builder) {
        mSkipDuration &＃61; builder.mSkipDuration;
        mTimeUnit &＃61; builder.mTimeUnit;
        mType &＃61; builder.mType;
    }

  public static class Builder {

        private long mSkipDuration;
        private TimeUnit mTimeUnit;
        private Type mType &＃61; Type.RX_VIEW;

        public Builder setSkipDuration(long mSkipDuration) {
            this.mSkipDuration &＃61; mSkipDuration;
            return this;
        }

        public Builder setTimeUnit(TimeUnit mTimeUnit) {
            this.mTimeUnit &＃61; mTimeUnit;
            return this;
        }

        public Builder setType(Type type) {
            this.mType &＃61; type;
            return this;
        }

        public ViewClickUtil build() {
            return new ViewClickUtil(this);
        }

    }


3.定义一个枚举

  public enum Type {
        RX_VIEW, VIEW
    }


4.如何使用

   &＃64;Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        new ViewClickUtil.Builder()
                .setSkipDuration(500)
                .setTimeUnit(TimeUnit.MILLISECONDS)
                .setType(ViewClickUtil.Type.RX_VIEW)
                .build().clicks(this, click1, click2, skip);
    }

    long oldTime &＃61; SystemClock.elapsedRealtime();

    &＃64;Override
    public void onClick(View v) {
        long nowTime &＃61; SystemClock.elapsedRealtime();
        switch (v.getId()) {
            case R.id.click1:
                LogUtil.logD("click1: " &＃43; (nowTime - oldTime));
                break;
            case R.id.click2:
                LogUtil.logD("click2: " &＃43; (nowTime - oldTime));
                break;
            case R.id.skip:
                startActivity(new Intent(this, SkipActivity.class));
                break;
        }
        oldTime&＃61;  nowTime;
    }


需要注意的是&＃xff1a;view的setOnClickListener对象是ViewClick&＃xff0c;同时在ViewClick的oclick()方法里面调用传入的View.OnClickListener的onClick()方法

这只是楼主的实现方式&＃xff0c;大家如果有其他实现方式的可以在评论区留言&＃xff0c;如果有要代码的&＃xff0c;请点击关注&＃xff0c;谢谢&＃xff01;&＃xff01;&＃xff01;

参考资料&＃xff1a;
https://www.jianshu.com/p/7b354eb8d0d3

推荐阅读
程序员的自我修养&＃xff1a;写简历
程序员的自我修养&＃xff1a;面试技巧
程序员的自我修养&＃xff1a;谈薪技巧

编程·思维·职场
欢迎扫码关注