欢迎转载,转载请标明出处:

http://blog.csdn.net/johnny901114/article/details/51555203

本文出自:【余志强的博客】

一、抛出问题

现在几乎所有的App都有搜索功能 , 一般情况我们监听EditText控件,当值发生改变去请求搜索接口. 如:

etKey.addTextChangedListener(new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
    }

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
    }

    @Override
    public void afterTextChanged(Editable s) {
        String key = etKey.getText().toString().trim();
        if (key.length() > 0){
            search(key);// 请求搜索接口,成功后把结果显示到界面上.
        }
    }
});

这样做有两个问题:

  • 可能导致很多没有意义的请求,耗费用户流量(因为控件的值每更改一次立即就会去请求网络,而且只是最后输入的关键字是有用的)
  • 可能导致最终搜索的结果不是用户想要的. 例如,用户一开始输入关键字’AB’ 这个时候出现两个请求, 一个请求是A关键字, 一个请求是AB关键字. 表面上是’A’请求先发出去, ‘AB’请求后发出去. 如果后发出去的’AB’请求先返回, ‘A’请求后返回,那么’A’请求后的结果将会覆盖’AB’请求的结果. 从而导致搜索结果不正确.

二、如何解决问题

使用强大的RxJava的 debounce操作符 可以解决这个问题。

subscription = RxTextView.textChanges(etKey)
                .debounce(400, TimeUnit.MILLISECONDS, AndroidSchedulers.mainThread())
                .subscribeOn(AndroidSchedulers.mainThread())// 对etKey[EditText]的监听操作 需要在主线程操作
                //对用户输入的关键字进行过滤
                .filter(new Func1<CharSequence, Boolean>() {
                    @Override
                    public Boolean call(CharSequence charSequence) {
                        Log.d("RxJava", "filter is main thread : " + (Looper.getMainLooper() == Looper.myLooper()));
                        return charSequence.toString().trim().length() > 0;
                    }
                })
                .flatMap(new Func1<CharSequence, Observable<List<String>>>() {
                    @Override
                    public Observable<List<String>> call(CharSequence charSequence) {
                        Log.d("RxJava", getMainText("flatMap"));
                        return searchApi.search(charSequence.toString());
                    }
                })
                .subscribeOn(Schedulers.io())
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe(new Action1<List<String>>() {
                    @Override
                    public void call(List<String> strings) {
                        tvContent.setText("search result:\n\n");
                        tvContent.append(strings.toString());
                    }
                }, new Action1<Throwable>() {
                    @Override
                    public void call(Throwable throwable) {
                        throwable.printStackTrace();
                        tvContent.append("Error:" + throwable.getMessage());
                    }
                });

上面代码的主要逻辑:

  • 使用debounce操作符设置: 只有当用户输入关键字后400毫秒才发射数据[说的直白点就是400毫秒后才会走后面的逻辑];
  • 使用filter操作符 对用户输入的关键字进行过滤:只有输入的关键字不为空,才会走后面的逻辑;
  • 使用flatMap操作符:使用最终的关键字去请求搜索接口

至此,避免EditText每改变一次就请求一次的情况。

但是,还有一个问题,上面说的导致搜索结果的错乱,上面的代码还是没有解决,比如停止输入400毫秒后, 那么肯定会开始请求Search接口, 但是用户又会输入新的关键字,这个时候上个请求还没有返回, 新的请求又去请求Search接口.这个时候有可能最后的一个请求返回, 第一个请求最后返回,导致最终显示的结果是第一次搜索的结果.

怎么去解决这个问题:可以使用switchMap操作符解决。

看看官网对 switchMap操作符 如何解释的:

Returns a new Observable by applying a function that you supply to each item emitted by the source Observable that returns an Observable,
and then emitting the items emitted by the most recently emitted of these Observables.

switchMap操作符flatMap操作符 差不多,区别是switchMap操作符只会发射[emit]最近的Observables。

也就是说,当400毫秒后,发出第一个搜索请求,当这个请求的过程中,用户又去搜索了,发出第二个请求,不管怎样,switchMap操作符只会发射第二次请求的Observable。所以,在上面的代码基础上把flatMap改成switchMap就可以了。


github源码下载

RxJava(七) 使用debounce操作符 优化app搜索功能的更多相关文章

  1. Vue2.5开发去哪儿网App 搜索功能完成

    效果展示: Search.vue: <div class="search-content" ref="search" v-show="keywo ...

  2. 开发手机APP过程,不同使用场景APP搜索框的样式及区别

    搜索框是 app 内最常见的控件之一,可以帮助用户快速又精准找到期望的内容与功能.不同的使用场景下,根据页面中搜索的重要程度,搜索框也有着不同的样式. 下面就常州开发APP公司和大家聊聊常见的四种样式 ...

  3. RxJava系列4(过滤操作符)

    RxJava系列1(简介) RxJava系列2(基本概念及使用介绍) RxJava系列3(转换操作符) RxJava系列4(过滤操作符) RxJava系列5(组合操作符) RxJava系列6(从微观角 ...

  4. RxJava【过滤】操作符 filter distinct throttle take skip first MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  5. 云搜索服务在APP搜索场景的应用

    搜索无处不在,尤其是在移动互联的今天.无论是社交,电商,还是视频等APP中,搜索都已经在其中扮演了重要的角色.作为信息的入口,搜索能帮用户从海量信息中找到想要的信息.在APP搜索的典型场景如下: ●  ...

  6. RxJava2实战---第七章 合并操作符和连接操作符

    RxJava2实战---第七章 合并操作符和连接操作符 RxJava的合并操作符: startWith():在数据序列的开头增加一项数据. merge:将多个Observable合并为一个. merg ...

  7. 5个可以帮你优化App的优秀网站

    也许现在有一款App可以提供所有你需要的,你不需要的,或者你可以想象到的内容.但是,有多少App真的可以不仅满足需求而且还能提供很好的用户体验呢? 相信很多APP并没有这样的能力.有一些APP的设计特 ...

  8. 011.Adding Search to an ASP.NET Core MVC app --【给程序添加搜索功能】

    Adding Search to an ASP.NET Core MVC app 给程序添加搜索功能 2017-3-7 7 分钟阅读时长 作者 本文内容 1.Adding Search by genr ...

  9. Android使用RxJava+Retrofit2+Okhttp+MVP练习的APP

    Android使用RxJava+Retrofit2+Okhttp+MVP练习的APP 项目截图     这是我的目录结构 五步使用RxJava+Retrofit2+Okhttp+RxCache 第一步 ...

随机推荐

  1. Python基础学习(第一周)

    Python是一门什么语言 编译型和解释型 通俗来讲,编译型就是一次性把所有程序写的代码都转换成机器可以识别的语言(机器语言),即可执行文件.exe: 解释型就是程序每执行到某一条指令,则会有有个称之 ...

  2. Java中数据表的建立

    class Emp{ private int empno;//职工编号 private String ename;//姓名 private String job;//职位 private double ...

  3. 机器学习技法:03 Kernel Support Vector Machine

    Roadmap Kernel Trick Polynomial Kernel Gaussian Kernel Comparison of Kernels Summary

  4. 机器学习基石:13 Hazard of Overfitting

    泛化能力差和过拟合: 引起过拟合的原因: 1)过度VC维(模型复杂度高)------确定性噪声: 2)随机噪声: 3)有限的样本数量N. 具体实验来看模型复杂度Qf/确定性噪声.随机噪声sigma2. ...

  5. [ZJOI 2010]Perm 排列计数

    Description 题库链接 询问有多少个 \(1\sim N\) 的排列 \(P\) 满足" \(\forall i\in[2,N], P_i>P_{\frac{i}{2}}\) ...

  6. 【IOI1998】Picture(扫描线+线段树)

    问题来源:IOI1998 D2T1 题意:就是在一个平面内给出n个矩形,叫你计算将这些矩形合并以后,新图形的周长. 例如: 上图是原本的矩形们 ---------->合并后的图形 解题思路:拿一 ...

  7. bzoj 2004: [Hnoi2010]Bus 公交线路

    Description 小Z所在的城市有N个公交车站,排列在一条长(N-1)km的直线上,从左到右依次编号为1到N,相邻公交车站间的距 离均为1km. 作为公交车线路的规划者,小Z调查了市民的需求,决 ...

  8. 【无语凝噎(wordless)】

    ·题目:         西施与范蠡泛舟而去……不对,场景不对,咳咳.在甄嬛前往蓬莱洲之前,她与皇上在碧桐书院告别.为了这可能会长达数月的离别,两个人都似乎有很多话要对对方说,却都无语凝噎.这时,皇上 ...

  9. Codeforces Round #407 (Div. 2)

    来自FallDream的博客,未经允许,请勿转载,谢谢. ------------------------------------------------------ A.Anastasia and ...

  10. SpringBoot中跨域问题

    项目中经常会遇到浏览器跨域的问题,解决方式在启动类中配置 @Bean public FilterRegistrationBean corsFilter() { UrlBasedCorsConfigur ...