用户登录

在搜索栏上每次搜索栏的值有变化都会执行一次搜索 .. 下面我们可以优化一下搜索的频率 ... 先找到之前定义的 search ..

在方法里面用一个 console.log .. 输出点文字 .. 搜索 .. 加上要搜索的值 ..

再回到模拟器试一下 .. 比如搜索一下 水洗站 ... 你会发现控制台输出了很多次搜索 .. 后面是要搜索的关键词 .. 这里有很多无用的搜索 .. 真正有效的搜索,只有最后这次 搜索水洗站这个关键词 ..

下面我们可以 debounce 的方法优化一下这个搜索频率问题 ..

打开编辑器集成的终端 .. 先给项目安装一个包 .. 名字是 lodash .. 保存在项目的依赖里面 ..

然后在这个页面的顶部 .. 导入刚才安装的 lodash ,导入进来的名字是下划线 .. 它来自 lodash 这个包 ..

在这个 search 方法的下面,可以再去创建一个新的搜索方法 ..

名字叫 debounceSearch .. 这个方法用一下 lodash 里的 debounce 方法来生成 .. 根据 this.search 这个方法 .. 间隔的时间是 500 毫秒 .. 就是半秒钟 ..

找到搜索栏的 onChange 事件处理 .. 这里执行搜索的时候用一下 debounceSearch 这个方法 ..

回到模拟器,再测试一下 ..

搜索水洗站 .. 这次你会发现 .. 只执行了一次搜索 .. 就是搜索 水洗站 这个关键词 ..

再搜索一下 秘鲁 ..

刚才我们做搜索的时候,只执行了三次搜索动作 .. 一次是搜索 水洗站 .. 还有一次是搜索空白 .. 最后一次是搜索 秘鲁 ...

优化搜索频率(debounce)《 电商小程序案例:搜索 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点