1、秒杀加载慢的主要原因是定时器加载慢，吃内存！另外定义变量timer_js来显示倒计时。接口合并优化获取redis

yvan.ni
1 parent 206bdff9
Showing 2 changed files with 92 additions and 44 deletions
pages/activity/seckill_list/seckill_list.js
pages/activity/seckill_list/seckill_list.wxml
@@ -17,7 +17,9 @@ Page({
     isshow: 0,
     ad_data: null,
     max_sw_height: 200,
-    is_retail_price:0
+    is_retail_price:0,
+
+    timer_js:[]
   },
   //------初始化加载----------
@@ -101,6 +103,7 @@ Page({
   onHide: function () {
     //--清理定时器--
     clearInterval(this.data.timer);
+    this.data.is_timer=0;
     this.setData({
       isshow: 0
     });
@@ -110,9 +113,10 @@ Page({
     return param < 10 ? '0' + param : param;
   },
-  //----倒计时函数-----
+  //----倒计时函数,优化定时器只显示在可视范围内的-----
   countDown() {
     if (!this.data.is_timer) return false;
+
     var th = this;
     // 获取当前时间，同时得到活动结束时间数组
     let newTime = ut.gettimestamp();
@@ -120,45 +124,78 @@ Page({
     if (endTimeList == null) return null
     // 对结束时间进行处理渲染到页面
     for (var i = 0; i < endTimeList.length; i++) {
+
+      if (!this.data.is_timer) break;
+
       var o = endTimeList[i];
       if(!o) continue;
       var endTime = o.end_time;
       if (th.data.type == 0) endTime = o.start_time;
-      let obj = null;
-      // 如果活动未结束，对时间进行处理
-      if (endTime - newTime > 0) {
-        let time = (endTime - newTime);
-        // 获取天、时、分、秒
-        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);
-        obj = {
-          day: this.timeFormat(day),
-          hou: this.timeFormat(hou),
-          min: this.timeFormat(min),
-          sec: this.timeFormat(sec),
-          hide: 1
-        }
-      } else {
-        //活动已结束，全部设置为'00'
-        obj = {
-          day: '00',
-          hou: '00',
-          min: '00',
-          sec: '00'
+
+      // 创建查询对象
+      let query = wx.createSelectorQuery();
+      // 获取目标元素，并获取目标元素的信息
+      query.select("#kill-item"+i).boundingClientRect();
+      // 获取视口，并获取视口信息
+      query.selectViewport().boundingClientRect();
+      //--  执行查询,元素要在显示中的才显示定时器 --
+      query.exec(([target, view]) => {
+
+        if (!th.data.is_timer) return;
+        if (!target) return;
+        if (!target.id) return;
+
+        let idx=  target.id.replace('kill-item','');
+        // 条件1：当目标顶部距离视口顶部距离小于视口的高度时
+        // 条件2：当目标底部距离视口顶部距离大于0时
+        // 当以上两个条件同时成立时，目标元素在视口中
+        if (target.top < view.height && target.bottom > 0) {
+          let obj = null;
+          // 如果活动未结束，对时间进行处理
+          if (endTime - newTime > 0) {
+            let time = (endTime - newTime);
+            // 获取天、时、分、秒
+            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);
+            obj = {
+              day: this.timeFormat(day),
+              hou: this.timeFormat(hou),
+              min: this.timeFormat(min),
+              sec: this.timeFormat(sec),
+              hide: 1
+            }
+          } else {
+            //活动已结束，全部设置为'00'
+            obj = {
+              day: '00',
+              hou: '00',
+              min: '00',
+              sec: '00'
+            }
+          }
+          var txt = "timer_js[" + idx + "]";
+          th.setData({
+            [txt]: obj
+          });
+        } else {
+          console.log("隐藏中");
         }
-      }
-      var txt = "goodlist[" + i + "].djs";
-      th.setData({
-        [txt]: obj
       });
+
+
+
     }
   },
   async requestSalelist() {
     //--没有更多就不调用--
     if (!this.data.ismore) return false;
+    if(this.data.lding) return false;
+    this.data.lding=1;
+
+
     var e = this,
       th = e,
       i = "/api/ms/flash_sale/spikepage?page=" + e.data.currentPage;
@@ -223,6 +260,7 @@ Page({
         getApp().showWarning("没有更多数据");
       }
+      this.data.lding=0;
       return false;
     }
@@ -239,14 +277,22 @@ Page({
         plist[i].price_n = price
       }
       var prom_id = plist[i].id;
-      await getApp().request.promiseGet("/api/weshop/activitylist/getActLen/" +
-        os.stoid + "/1/" + prom_id, {}
-      ).then(res => {
-        if (res.data.code == 0) {
-          plist[i].status = 1;
-          if (res.data.data <= 0) plist[i].status = 3;
-        }
-      })
+
+      // await getApp().request.promiseGet("/api/weshop/activitylist/getActLen/" +
+      //   os.stoid + "/1/" + prom_id, {}
+      // ).then(res => {
+      //   if (res.data.code == 0) {
+      //     plist[i].status = 1;
+      //     if (res.data.data <= 0) plist[i].status = 3;
+      //   }
+      // })
+
+      plist[i].status = 1;
+      if (plist[i].actLen <= 0) {
+        plist[i].status = 3;
+      }
+
+
       alllist.push(plist[i]);
     }
     e.data.currentPage++;
@@ -258,7 +304,9 @@ Page({
     setTimeout(()=>{
       wx.hideLoading();
-    },500)
+    },200)
+
+    this.data.lding=0;
@@ -32,7 +32,7 @@
 <view class="kill-list abs seckill_list"> 
-    <view class="kill-item" wx:for="{{goodlist}}" wx:if="{{item.djs.hide}}" >
+    <view  id="kill-item{{index}}" class="kill-item" wx:for="{{goodlist}}" >
         <!-- <navigator class="kill-pic rel" url="/pages/goods/goodsInfo/goodsInfo?goods_id={{item.goods_id}}&prom_id={{item.id}}&prom_type=1"> -->
 				<navigator url="{{item.goods_type == 0 ? ('/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id + '&prom_type=1&prom_id=' + item.id):('/packageA/pages/goodsInfo/goodsInfo?goods_id=' + item.goods_id + '&prom_type=1&prom_id=' + item.id )}}" class="kill-pic rel">
         <image class="abs xc-miaosha" src="{{url}}/miniapp/images/zms.png"></image>
@@ -59,12 +59,12 @@
             <view class="goods-num">
                 <view>
-                <view class="{{type==1?'xc-wc':'blue_c'}}"> 
+                <view wx:if="{{timer_js[index].hide}}"  class="{{type==1?'xc-wc':'blue_c'}}">
                     <text>剩余:</text>
-                        <text class='tui-conutdown-box'> {{item.djs.day}}</text>天
-                        <text class='tui-conutdown-box'>{{item.djs.hou}}</text>时
-                        <text class='tui-conutdown-box'>{{item.djs.min}}</text>分
-                        <text class='tui-conutdown-box tui-countdown-bg'>{{item.djs.sec}}</text>秒
+                        <text class='tui-conutdown-box'> {{timer_js[index].day}}</text>天
+                        <text class='tui-conutdown-box'>{{timer_js[index].hou}}</text>时
+                        <text class='tui-conutdown-box'>{{timer_js[index].min}}</text>分
+                        <text class='tui-conutdown-box tui-countdown-bg'>{{timer_js[index].sec}}</text>秒
                     </view>
                     <view class="fs40 flex xc-buttom-money {{type==1?'xc-wc':'blue_c'}}" >
                     <view class="fs28" style="line-height: 16px;">￥</view>