共计 667 个字符,预计需要花费 2 分钟才能阅读完成。
我的项目中有一个页面中用户次要有三个和后端交互的局部:
a. 上传头像校验胜利后返回图片链接
b. 依据定位经纬度向后盾获取地位信息并展现在编辑界面
c. 最初将 a,b 返回信息以及一些其余输出信息一起提交。
其中 a,b 两个接口都是须要在点击最初确认之前申请。
最简略的办法就是在 a,b 接口申请的时候将确认按钮置灰或 loading。然而独自减少置灰的话用户可能会感到纳闷, 减少显著的 loading 的话会影响到用户批改其余信息。
如何使用户无感这个步骤?
次要思路:1. 当用户点击提交的时候如果 a,b 有一个没执行完期待最初一个执行完后执行 c。2. 当用户点击提交 a,b 都执行完间接执行 c。
代码设计也比较简单:
1. c 申请存在三个执行的机会
. 页面点击确认
. 点击确认 a 执行完结
. 点击确认 b 执行完结。2. 设置三个标志符: 点击确认后 C, a 申请执行完结后 A, b 申请执行完结后 B
3. c 申请函数中减少判断,如果未点击确认或者 a、b 正在申请中则间接返回,否则执行申请函数
代码示例
let A, B, C;
function a() {
A = true
try {
// ... 执行申请逻辑
c();} catch(err) {
// 提醒谬误
C = false;
}
A = false
}
function B() {
B = true
try {
// ... 执行申请逻辑
c();} catch(err) {
// 提醒谬误
C = false;
}
B = false
}
function submit() {
C = true;
c();}
function c() {if (B || C) return; // b,c 正在申请中
if (!C)return;
// ... 执行申请
C = false;
}
正文完
发表至: javascript
2021-06-20