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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序页面跳转后js定时器没有销毁的问题，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2378字，纯文字阅读大概需要4分钟。

内容图文

现在有一个小程序，对页面数据的实时性很强，本来想用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){
            //这里是成功后的操作
        }
      }
    })
}

内容总结

以上是互联网集市为您收集整理的微信小程序页面跳转后js定时器没有销毁的问题全部内容，希望文章能够帮你解决微信小程序页面跳转后js定时器没有销毁的问题所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端