如何清除微信小程序页面子组件中定义的计时器，答案就在这里！！！

目录

业务场景

 发现问题

分析解决问题

总结

---

业务场景

本次项目需求是做一套类似于拼多多拼团活动的项目，在活动商品详情页会有一个该商品的快速参团列表，列表必须在一定时间段内无限滚动，由于涉及到了倒计时的原因，故将其抽离出去封装成了一个组件。如图

 发现问题

最开始想到的是使用swiper组件，但是后期发现在swiper设置了display-multiple-items属性后，如果当前页的item数小于该值，是不会显示的，当时也没多想就直接用scroll-view代替（其实swiper组件在区分数据长度的情况下也能实现），问题来了，在我使用了scroll-view组建后，运动函数得自定义了，并且在组件隐藏和卸载后都必须将运动函数的定时器给清除掉，不然会造成内存泄漏。

分析解决问题

• 在组件承载页面卸载（组件卸载）后清楚计时器。

        组件生命周期:

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

        如图只需在detached勾子函数中去清除计时器。

        注意：不是包含在lifetimes对象中的detached勾子函数，我当时就在这儿踩坑了。

• 在组件承载页面（组件所在页面）隐藏后清楚计时器。

        这个问题就要考虑到组件所在页面的生命周期了：

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏

      // 在这里进行清除计时器的操作
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})

          页面隐藏后清除计时器，所以我们选择在hide勾子中添加清楚计时器逻辑。

        注意：如果遇到跟我类似的场景一定要考虑这两种情况。（我当时只考虑了组件页面被卸载这一种情况）

更多内容请参考官方文档：组件的生命周期

总结

遇到问题，经过思考分析后，查资料最先考虑必须是官方文档，因为看文档能够解决70%的问题，

今天这个问题虽然不复杂但是卡了很久，必须记录一下，希望能够帮到志同道合的朋友，再见！！