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