zoukankan      html  css  js  c++  java
  • 微信小程序页面跳转后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

  • 相关阅读:
    2.6 CMMI2级——供应商协议管理(Supplier Agreement Management)
    使用boch仿真器在x86 PC平台上搭建Linux0.11系统环境(windows下)
    java实现登录验证码
    Hadoop DBOutputFormat的使用
    史蒂芬·金《肖申克的救赎》读后感
    Change Base
    IOS深入学习(20)之Object modeling
    android对话框(Dialog)的使用方法
    郝萌主的微信公众号上线了
    Dell shareplex 与HVR数据复制软件
  • 原文地址:https://www.cnblogs.com/qixidi/p/10296055.html
Copyright © 2011-2022 走看看