收藏
回答

关于小程序setData的写法,如何减少setData次数?优化程序性能

微信小程序,页面有个限时抢购,每个商品都有一个倒计时,实现的方法是有个setTimeOut每秒递减一次时间,具体代码如下:

问题:使用循环,假设有5个商品,每秒要setData五次,感觉这样写很不科学,应该不利于性能。所以,请教一下各位大哥有什么优化建议。

data: {
//限时抢购内容
    dataRushToBuy: [{
      imageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591554165031&di=4929aa3cfa3ccf4758ad19be6255a6ab&imgtype=0&src=http%3A%2F%2Fimg3.99114.com%2Fgroup1%2FM00%2FF2%2F49%2FwKgGTFkUuLmAWgneAAMEPU7tIGM054.jpg',
      grade: 'A级',
      title: '现捞鲜活生蚝',
      subTitle: '新鲜正宗乳山大生蚝',
      tag: ['积分双倍', '不可用卷'],
      number: 8,
      price: '33.3',
      originalPrice: '66.9',
      endTime: '2020-07-28 03:00:11',
      countDown: [{
        day: '22',
        hou: '23',
        min: '24',
        sec: '25'
      }]
    }, {
      imageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591554550828&di=2e9273fc79630404ccafc6abc5b28c67&imgtype=0&src=http%3A%2F%2F8481538.s21i-8.faiusr.com%2F2%2Fabuiabacgaag1-_8uwuo8m6dwjcobdjtaw.jpg',
      grade: 'A级',
      title: '上海青500g-800g',
      subTitle: '细腻爽滑,营养丰富,来自大自然的馈赠',
      tag: ['店长推荐'],
      number: 20,
      price: '3.3',
      originalPrice: '8.9',
      endTime: '2020-06-22 03:00:12',
      countDown: [{
        day: '22',
        hou: '23',
        min: '24',
        sec: '25'
      }]
    }, {
      imageUrl: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2840192109,2046781298&fm=26&gp=0.jpg',
      grade: 'B级',
      title: '越南进口龙利鱼柳无骨无刺巴沙鱼鱼片',
      subTitle: '细腻爽滑,营养丰富,来自大自然的馈赠',
      tag: ['积分双倍', '店长推荐'],
      number: 19,
      price: '63.3',
      originalPrice: '68.9',
      endTime: '2020-05-28 03:00:13',
      countDown: [{
        day: '22',
        hou: '23',
        min: '24',
        sec: '25'
      }]
    }, {
      imageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591630473933&di=7b12ab2422b79209d4d277628cd08f4d&imgtype=0&src=http%3A%2F%2Fm1.biz.itc.cn%2Fpic%2Fnew%2Fn%2F96%2F47%2FImg5864796_n.jpg',
      grade: 'A级',
      title: '神户牛肉',
      subTitle: '细腻爽滑,营养丰富,来自大自然的馈赠',
      tag: ['积分双倍'],
      number: 19,
      price: '363.3',
      originalPrice: '368.9',
      endTime: '2020-06-14 03:00:14',
      countDown: [{
        day: '22',
        hou: '23',
        min: '24',
        sec: '25'
      }]
    }, {
      imageUrl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2102551933,267546245&fm=26&gp=0.jpg',
      grade: 'A级',
      title: '鲜活澳洲深水大龙虾500g-800g',
      subTitle: '细腻爽滑,营养丰富,来自大自然的馈赠',
      tag: ['店长推荐'],
      number: 20,
      price: '263.3',
      originalPrice: '268.9',
      endTime: '2020-06-16 03:00:15',
      countDown: [{
        day: '22',
        hou: '23',
        min: '24',
        sec: '25'
      }]
    }]
}
 
 //倒计时函数
  funCountDown: function () {
    //获得数组
    let arrList = this.data.dataRushToBuy;
    //获得当前时间
    let nowTime = new Date().getTime();
    //循环数组递减时间
    for (var i = 0, len = arrList.length; i < len; i++) {
      //将结束时间转换为时间戳
      let vEndTime = new Date(arrList[i].endTime).getTime();
      //声明一个空数组
      let arrCountDown = []
      //如果结束时间-现在时间大于0则递减时间
      if (vEndTime - nowTime > 0) {
        let time = (vEndTime - nowTime) / 1000;
        // 获取天、时、分、秒
        let day = parseInt(time / (60 * 60 * 24));
        let hou = parseInt(time % (60 * 60 * 24) / 3600);
        let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
        let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
        //写入数组
        arrCountDown = [{
          day: day,
          hou: hou,
          min: min,
          sec: sec
        }]
        //如果结束时间-现在时间不大于0则全部写入为00
      } else {
        arrCountDown = [{
          day: '00',
          hou: '00',
          min: '00',
          sec: '00'
        }]
      }
      //渲染写入处理后的时间
      this.setData({
        ['dataRushToBuy[' + i + '].countDown']: arrCountDown
      })
    }
    //每秒重复一次
    setTimeout(this.funCountDown, 1000);
  },
 
  //页面加载函数
  onLoad() {
    this.funCountDown();
  }
回答关注问题邀请回答
收藏

2 个回答

  • Terry.Zhao
    Terry.Zhao
    2020-06-20

    你的代码里把

    this.setData({
            ['dataRushToBuy[' + i + '].countDown']: arrCountDown
          })
    


    这段放到for 循环外面,在for循环里计算好一个data,每个循环往 data 里放一个数据,data都可以直接用你现在的形式

    data['dataRushToBuy[' + i + '].countDown'] = arrCountDown
    


    然后在外面调用this.setData(data),就可以只调用一次setData

    2020-06-20
    有用
    回复
  • 拾忆
    拾忆
    2020-06-14

    改变数据结构,商品放在一个key里,js中每秒循环处理后只要执行一次setData不就可以

    2020-06-14
    有用
    回复
登录 后发表内容
问题标签