微信小程序> 微信小程序页面跳转后js定时器没有销毁的问题

微信小程序页面跳转后js定时器没有销毁的问题

浏览量:2776 时间: 来源:区块链攻城狮

现在有一个小程序,对页面数据的实时性很强,本来想用socket,仔细研究了一下,万剑不离其中,它是websocket。服务端不会用,所以使用了传统的http请求方式。

1.请先看官方文档

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

说明:官方文档的路由触发方式对页面生命周期的影响。如图:

在项目过程中,服务端不开心的说,你怎么一直请求我,我服务都反应不过来快崩溃了。经过控制台仔细查看发现,只要打开过的小程序页面的定时器都在不间断的运行着,这是为什么?

后来研究发现,微信小程序为什么会有页面生命周期这个概念,因为它和我们传统的web浏览器切换页面的机制是不同的。小程序的页面切换,是页面的显示和隐藏,只有没有启动过的页面才会进行初始化onLoad()。

明白了,页面跳转后,隐藏了页面,但是依然后台运行着。为了减轻服务端的请求压力,必须保证不展示页面的数据,停止刷新。具体操作请查看如下代码:

主要实现在js文件中

var obj=wx.createSelectorQuery();var config = require('../../config.js');var app = getApp();Page({data: {    timerTask:''//本页面的定时任务,要在这里声明定时器的变量名,title: '工作面',listRy: {'bianhao': '0','xingming': '0','dangqianquduan': '0','daodashike': '0','banci': '0','jibie': '0','bumen': '0'},listXz: [{'bianh': '0','machineid': '0','detectorid': '0','xtime': '0','quduanming': '0'},{'bianh': '0','machineid': '0','detectorid': '0','xtime': '0','quduanming': '0'},{'bianh': '0','machineid': '0','detectorid': '0','xtime': '0','quduanming': '0'},]},onReady:function(res) {        // 页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。},onLoad: function (e) {var title = e.titlevar that = thiswx.setNavigationBarTitle({title: title});    },  onShow: function () {    var that = this;    var id = e.id    //页面加载成功后,要先请求一次数据,否则会在定时时间到达时才会请求数据    search_data(that, id);    //将定时器赋值给data中的timerTask变量,便于关闭定时器调用    that.setData({      timerTask: setInterval(function () {        search_data(that, id);      }, config.timeOut)    })  },  onHide: function () {    //写在onHide()中,切换页面或者切换底部菜单栏时关闭定时器。    clearInterval(this.data.timerTask);  },qiehuan_click: function(e) {this.setData({select:e.target.dataset.num})},})function search_data(that,id){    wx.request({      url: config.service.host      , method: 'post'      , data: {'query': 'gzm','bianh': id}      , header: {'content-type': 'application/x-www-form-urlencoded' // 默认值      }      , dataType: 'json'      , success: function (re) {       console.log(re)        if (re.statusCode==200){            //这里是成功后的操作        }      }    })}

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎