EXT Tabpanel多标签实时监控中ajax请求的关闭控制解决方法
EXT Tabpanel多标签实时监控中ajax请求的关闭控制解决办法
问题背景:利用Tabpanel来完成项目中实时监控任务的展现,ajax定时(隔10秒或5秒)后台请求
数据。因此脚本要管理到每一个tabpanel与ajax请求的新增与关闭。
处理思路:用时间戳区分每一个产生的tab,每新增一个tab,则产生一个新的ajax请求对象,将
新产生的tab与ajax都保存进入一个简单的数组或类哈希表的结构中。监听tab的关闭
动作,消除对应的ajax请求对象和tab对象。
关键代码:
问题背景:利用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);