EXT Tabpanel多标签实时监控中ajax请求的关闭控制解决办法-CSDN博客

本文介绍了一种使用TabPanel实现项目中实时监控任务展示的方法，通过管理每个tabpanel及其对应的Ajax请求，实现数据的定时更新与资源的有效释放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题背景：利用Tabpanel来完成项目中实时监控任务的展现，ajax定时（隔10秒或5秒）后台请求
数据。因此脚本要管理到每一个tabpanel与ajax请求的新增与关闭。
处理思路：用时间戳区分每一个产生的tab，每新增一个tab，则产生一个新的ajax请求对象，将
新产生的tab与ajax都保存进入一个简单的数组或类哈希表的结构中。监听tab的关闭
动作，消除对应的ajax请求对象和tab对象。
关键代码：


//存储实时监控任务数据请求的对象
var relTimeTaskHashMap = {
	Set : function(key, value) {
		this[key] = value
	},
	Get : function(key) {
		return this[key]
	},
	Contains : function(key) {
		return this.Get(key) == null ? false : true
	},
	Remove : function(key) {
		delete this[key]
	}
};
//存储tab对象
var chartHashMap = {
	Set : function(key, value) {
		this[key] = value
	},
	Get : function(key) {
		return this[key]
	},
	Contains : function(key) {
		return this.Get(key) == null ? false : true
	},
	Remove : function(key) {
		delete this[key]
	}
};
//ajax请求的守护对象，负责ajax请求发起和停止
function RealTimeTaskDefend(){
	var threadStatus;
	var callBackFunction;
	this.setCallBackFunction=function(callFunction){
		this.callBackFunction=callFunction;
	}
	this.run=function(){
		this.threadStatus=setInterval(this.callBackFunction,5000);
	}
	this.stop=function(){
		clearTimeout(this.threadStatus);
	}
}
//新增加一个tab需要完成的动作      
var realTimeTaskDefend = new RealTimeTaskDefend();
relTimeTaskHashMap.Set(tabPanelId, realTimeTaskDefend);
chartHashMap.Set(tabPanelId,'实时监控的展现对象入口');

//发起监控请求需要完成的动作
var realTimeTaskDefend_run = relTimeTaskHashMap.Get(tabpanelId)
    realTimeTaskDefend_run.setCallBackFunction('实时监控的数据处理方法入口');
    realTimeTaskDefend_run.run();

//结束监控请求需要完成的动作
var realTimeTaskDefend_stop  = relTimeTaskHashMap.Get(tabPanelId);
    realTimeTaskDefend_stop .stop();
    relTimeTaskHashMap.Remove(tabPanelId);
    chartHashMap.Remove(tabPanelId);