前段时间在写小程序时遇到一个需求:如果用户没有登录,调用接口会返回一个特定的状态,在收到响应后根据这个状态来弹出一个提示窗口,引导用户登录。(效果如下)
本来是一个很简单的需求,调用uni.showModal()就可以了,但是在我写完然后信心满满的测试时却发现了一个问题:当一个页面请求了多个接口,并且都返回了需要登录的状态,这时会同时出现多个弹窗,这些弹窗互相重叠,表面上看只有一个,但却需要多次点击取消才能关掉弹窗。
是的,uni.showModal()并不会判断当前页面是否已经有弹窗,然后做避让,这样的话用户体验就不太好了。解决办法还是有的,比如定义一个全局的变量,用于记录页面是否已经存在弹窗。但是总感觉需求很简单但实现的方式挺麻烦...
最后终于想到一个办法,使用防抖函数!防止短时间内频繁调用弹窗。因为我使用了uv-ui,直接使用内置的防抖方法即可,当然也可以自己写一个防抖函数,效果是一样的。
//引入debounce方法
import debounce from '@/uni_modules/uv-ui-tools/libs/function/debounce.js';
//在合适的时候调用,第一个参数传需要调用的函数,第二个参数传时间(毫秒)
debounce(guildLogin, 500)
最后成功解决问题,虽然这样还是有漏洞,比如多次请求响应时间相差较大,就还是会出现上面的问题,但是基本可以满足我的需求了,剩下的我选择相信服务器,哈哈哈