微信小程序真机调试传输数据异常现象

新手自学小程序开发时，电脑端使用微信开发者工具一切正常，程序会按正常的逻辑顺序去执行

在手机调试时，发现数据前后端传输出现异常， 

如：

<!--index.wxml--> 
<view>
    <text>请输入第一个数字</text>
    <!-- <input type="number" bindchange="num1change"/> -->
    <input type="number" id="num1" bindchange="change"/>
</view>
<view>
    <text>请输入第二个数字</text>
    <!-- <input type="number" bindchange="num2change"/> -->
    <input type="number" id="num2" bindchange="change"/>
</view>
<button bindtap="compare">比较</button>
<view>
  <text>比较结果:</text> 
  <text class="result">{{result}}</text>
</view>


对应部分js
change:function(e){
  console.log(e)
  this[e.target.id]=Number(e.detail.value) 
  console.log("第一个数字是："+this.num1)
  console.log("第二个数字是:"+this.num2)
},
  compare(){
    var str="两数相等"
    if(this.num1>this.num2)
    {
      str="第一个数字大"
    }
    else if(this.num2>this.num1)
    {
      str="第二个数字大"
    }
    this.setData({result:str})

 

真机调试发现比较结果出错，分析得出

执行顺序的问题，手机是标准的异步处理，当输入完第二个数字，点击比较按钮的时候，优先执行的按钮的比较操作，此时刚刚改变的值js还没来得及得到最新数据，因此比较结果出现错误。

解决方案：输入完数据以后，可以先点击空白地方，让前后端数据传送完毕，然后点击比较按钮