巧用Promise处理执行顺序

这个文本框在失去焦点的时候

有个ajax事件

点击这个按钮呢还有一个提交事件

前两天一个小伙伴在群里

就提了这样一个要求

他希望

在文本框拿到焦点的同时去点按钮

这时候要先等待ajax执行完成

再去调用submit

因为这种情况属于两个逻辑同时发生

(文本框失去了焦点 同时点击按钮)

但是呢他还要求

可以跟文本框失去焦点没关系

比如说可能自始至终

页面进来没操作过文本框

直接点按钮也是可以的

我们来试一下哈

首先呢

我们能想到的

肯定是要在这加一个状态

比如说就叫mobileLoading

默认呢他是 false

然后呢我们在这

给他置一下状态

等于true(处于loading中)

然后呢在结束的时候

当然我们最好加到finally里面

现在加在这

比如说叫 false

然后呢

我们在他submit时候加一个判断

如果他处于 loading 状态

这时候要等待

那这个等待就不太好写了

确切的说要等那个ajax结束嘛

所以这块不太好写

那提到等待呢我们就要想到用 Promise

所以这块我们先等于空,可以这样写...

(把这个也删掉)

(这个都删掉)

来个 Promise

然后呢把这个return换成 this.mobileLoading = ...

也就是说让这个 mobileLoading 等于这个 Promise

然后在 Promise 里去执行这个ajax

然后

我们要想着在 finally 里边把这个置空

finally

等于空,也就是说:

只要这个mobileLoading有值

说明他正在请求ajax

所以呢下边就好判断了

我们在这如果他有值的话

我们就要把这个代码写到then里边

写到这里边

否则的话呢

写到这里边

然后呢把这个拿过来

我先写一个输出哈

我们来试一下哈

(我先把这清空一下)

获取焦点

点击,大家看 start、 end

哎? 没有调(submit)啊

这块忘了掉那个(resolve函数)了

好再来试一下获取焦点

点击

end、submit OK了

然后呢直接点击也没问题

最后更新于