巧用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了
然后呢直接点击也没问题