微信小程序页面跳转后js定时器没有销毁的问题
现在有一个小程序,对页面数据的实时性很强,本来想用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.title
var that = this
wx.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){
//这里是成功后的操作
}
}
})
}
来源:https://blog.csdn.net/weixin_42799222/article/details/86528216
微信小程序页面跳转后js定时器没有销毁的问题的更多相关文章
- 微信小程序-页面跳转与参数传递
QQ讨论群:785071190 微信小程序页面跳转方式有很多种,可以像HTML中a标签一样添加标签进行跳转,也可以通过js中方法进行跳转. navigator标签跳转 <view class=& ...
- 微信小程序页面跳转方法总结
微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.// 注 ...
- 微信小程序页面跳转导航wx.navigateTo和wx.redirectTo
}) wx.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面. 还是用上面的三张图示作为例子,当使用wx.redirctTo接口跳转页面时,原来的页面将被删除掉,当然,这是小 ...
- 微信小程序——页面跳转及传参
小程序页面跳转 微信小程序的页面跳转依然是以传统的请求转发和请求重定向为主,tabbar的存在,有TAB页面的跳转. 为了微信小程序的简介方便,规定页面路径只能是十层,应尽量避免过多的交互方式. 1. ...
- [转] 微信小程序 页面跳转 传递参数
本文转自:http://blog.csdn.net/qq_31383345/article/details/52795212 微信小程序的页面跳转,页面之间传递参数笔记. CSDN微信小程序开发专栏, ...
- 微信小程序页面跳转方法汇总
微信小程序前端页面跳转有多种方式,汇总如下: Tips: 小程序前端的页面跳转之后,跳转之前的页面并不会凭空消失,而是存进了一个类似“页面栈”的空间里: 只有当这个所谓的“页面栈”满了之后页面才会退出 ...
- 直击--vue项目微信小程序页面跳转web-view不刷新-根源
背景 最近项目需要适配小程序,项目是使用了vue开发的网站,其中改造方式是,每个页面都使用小程序创建一个页面通过web-view来显示指定页面的. 在没有使用小程序时,路由跳转时,刷新页面等等,这个是 ...
- 微信小程序页面跳转的三种方式总结
原文链接 https://blog.csdn.net/zgmu/article/details/72123329 首先我们了解到,小程序规定页面路径只能有五层,所以我们尽量避免多层级的页面跳转 页面跳 ...
- 微信小程序页面跳转 的几种方式
最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式 一.wx.navigateTo(OBJECT) 这是最普遍的一种跳转方式,其官方解释为:“保留当前页面,跳转到应用内的某个页面” 类 ...
随机推荐
- DOM API querySelector与querySelectorAll的用法
DOM API querySelector与querySelectorAll的用法: http://www.qttc.net/201309371.html querySelectorAll与quer ...
- js 中导出excel 较长数字串会变成科学计数法(转载)
在做项目中,碰到如题的问题.比如要将居民的信息导出到excel中,居民的身份证号码因为长度过长(大于10位),excel会自动的将过长的数字串转换成 科学计数法.现在网上找到解决方案之一: (在数字串 ...
- 170331、58到家MQ如何快速实现流量削峰填谷
问:为什么会有本文? 答:上一篇文章<到底什么时候该使用MQ?>引起了广泛的讨论,有朋友回复说,MQ的还有一个典型应用场景是缓冲流量,削峰填谷,本文将简单介绍下,MQ要实现什么细节,才能缓 ...
- hibernate中持久化对象的状态
持久化对象有以下几种状态: 临时对象(Transient): 在使用代理主键的情况下, OID 通常为 null 不处于 Session 的缓存中 在数据库中没有对应的记录 持久化对象(也叫”托管 ...
- C#中资源文件的使用
在程序中会用到图片,有两种方法,一种是将图片放在运行文件夹中,直接调用,另一种是将图片放入资源文件中. 方法一,一般在.exe文件同级创建文件夹,如“ico”,然后把图标放进去.在程序中代码采用相对路 ...
- 修改Android模拟器的system分区,以及加入SuperSU
http://www.claudxiao.net/2013/10/persistent-change-emulator-system-partition/ 对Android的模拟器,如果要修改其s ...
- How an event flows in a pipeline Netty Internal I/O Threads (Transport Implementation)
C:\Users\sas\.m2\repository\io\netty\netty-all\4.1.30.Final\netty-all-4.1.30.Final-sources.jar!\io\n ...
- python基础-第六篇-6.2模块
python之强大,就是因为它其提供的模块全面,模块的知识点不仅多,而且零散---一个字!错综复杂 没办法,二八原则抓重点咯!只要抓住那些以后常用开发的方法就可以了,哪些是常用的?往下看--找答案~ ...
- Python在向CSV文件写中文时乱码的处理办法
前言 python2最大的坑在于中文编码问题,遇到中文报错首先加u,再各种encode.decode.当list.tuple.dict里面有中文时,打印出来的是Unicode编码,这个是无解的.对中文 ...
- 深入浅出地,彻彻底底地理解python中的编码
python处理文本的功能非常强大,但是如果是初学者,没有搞清楚python中的编码机制,也经常会遇到乱码或者decode error.本文的目的是简明扼要地说明python的编码机制,并给出一些建议 ...