需要注意的是,当 showToast
执行时,整个页面是不可点击的。所以,不用考虑用户意外触发多次「查看更多」的问题。
调用 wx.hideToast()
即可隐藏 Toast 提示框。
现在,我们来思考一个问题。上面说到 wx.showToast
的 duration
最大值为 10000 毫秒,也就意味着当请求时间大于 10 秒,若没有返回数据时,loading 提示框会自动消失。
这会带来一些问题:
- 「查看更多」按钮重新变回可点击状态,可能造成请求的重复提交。
- 加载提示消失与数据成功加载之间出现时间差。
如何解决这个问题呢?其实很简单。
我们先给 loading
设置 10000 毫秒延迟时间,超过 10000 毫秒后,即使请求成功,也不保存任何数据。
同时,将按钮文字改回「查看更多」即可。
我们初始化一个 timeoutFlag
的对象,使用 timer = setTimeout()
设置 9800 毫秒延时。9800 毫秒后,以 timer
为 key
设置一个对象 { isTimeout: true }
,每次发起请求时都会有一个 timer
作为标识。
若请求成功时 timeoutFlag.timer
的值为 { isTimeout: true }
,则不处理请求成功后的数据。
为什么要设置 9800 毫秒而不是 10000 毫秒呢?
那是因为 setTimeout
的计时并不准确,我们给出 200
毫秒的提前量,以防止代码出错。
我们来封装一个 _setTimeoutFlag
方法: