关于javascript:记一次项目中的一个提交等待校验的问题

40次阅读

共计 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;
}

正文完
 0