• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

微信小程序页面跳转后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

posted @ 2019-01-20 20:25 栖息地 阅读(...) 评论(...) 编辑 收藏

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序~基础组件发布时间:2022-07-18
下一篇:
微信小程序在县城、乡镇的机遇正当时?发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap