微信小程序:等待时长计时功能

总体思路

1.时间处理函数逻辑

​ 1.1 设置两个形参,分别代表页面请求到的时间和系统最新时间

​ 1.2 将两个时间转换为时间戳,并相减得出时间戳差

​ 1.3 根据时间戳差,分别取余,计算出天/时/分/秒,然后将数据拼接起来并返回

2.数据请求成功区间

​ 2.1 设置一个一秒钟就执行一次的定时器

​ 2.2 在定时器里获取当前最新时间,调用时间处理函数,将函数返回值赋值给applyTime变量(页面渲染时间)

3.离开页面时清理掉定时器

结构

	<text>等待时长:</text>
	//applyTime的值改变后,页面会自动渲染
	<text style="color:red">{{applyTime}}</text>

data:{
    // 页面渲染时间
    applyTime:"",
    // 定时器名
    loanTime:''
}


// 时间处理函数
tiemDispose: function (faultDate, completeTime) {
  let priorTime = Date.parse(new Date(faultDate));
  let nowTime = Date.parse(new Date(completeTime));
  let usedTime = nowTime - priorTime; //两个时间戳差
  // 计算天数
  let days = Math.floor(usedTime / (24 * 3600 * 1000));
  //计算小时
  let leave1 = usedTime % (24 * 3600 * 1000); 
  let hours = Math.floor(leave1 / (3600 * 1000));
  //计算分钟
  let leave2 = leave1 % (3600 * 1000); 
  let minutes = Math.floor(leave2 / (60 * 1000));
  // 计算秒数
  let leave3=leave2%(60*1000)
  let second=Math.floor(leave3 / 1000);
  // 拼接
  let time = days+"天" + hours+"时" + minutes+"分"+second+"秒";
  return time;
  },
      
      
      
      
   //  详情获取网络请求  //
  async _getOrderDetails(params,order) {
    //获取外部this指向
    var that=this;
    const res = await getOrderDetails()
    if (res.code === 200) {
      //that.data.loanTime小程序中定时器要这种命名方式才能清除
      that.data.loanTime=setInterval(function(){
        //获取最新时间
        var timestamp = Date.parse(new Date()); 
        that.setData({
          //请求来的时间res.data.make_date=2020-11-19 14:48:44
          applyTime:that.tiemDispose(res.data.make_date, timestamp)
        })
      },1000)
    }
  }

  /**
   * 生命周期函数--页面卸载时触发(离开页面)
   */
  onUnload: function (options) {
    //清除定时器
    clearInterval(this.data.loanTime)
  },