我的项目中有一个页面中用户次要有三个和后端交互的局部:
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申请执行完结后B3. 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;}