uniapp延迟执行_uni-app开发小程序的一个坑位（事件触发）

事件触发的先后问题这是一个简单的手机验证码验证页面

当我们输入完验证码时 我设置一个blur(失去焦点事件)

当我们失去验证码的input框的焦点时 把输入的验证码储存起来

然后点击确认 进行判断

确定

这是一个非常简单的流程

执行结果如下

但是当我们选择小程序真机运行时

我们同样输入完直接点击确认 却出现了这样的场景

这也造成我的验证码还没有储存 就直接拿空值进行了对比 从而造成了错误

在JavaScript中 事件的触发算的上是一种异步回调

而这种异步回调触发的先后 在pc端和小程序端出现了明显的差别

在 pc 端我们输入完内容点击确认 先执行了blur事件 后执行了onclick事件

而在手机端 先执行了onclick事件 后执行了blur事件

这里我们可以使用 @input 事件

这个事件我们每次输入或删除一个值就会触发一次

假如这个验证码为4位 我们可以

if(e.detail.value.length == 4){

this.verificationCode = e.detail.value; //输入完验证码 当输入为4位时记录验证码

}

这样在pc端和手机端我们都可以达到我们想要的效果

总结：小程序开发，我们测试时一定要注意在手机上测试，不要觉得电脑测试下成功了就提交了，很容易造成意想不到的问题。