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