如何利用setTimetou和setInterval去监视容器的外观并产生相应。
起因
要fix一个footer位置的bug,需要在不同的容器高度下重新定位页脚的位置。

本来要用纯粹纯洁纯纯的css去实现,可是奈何浏览器不给力,无法正确识别容器高度,不得已想到了强大的js,于是决定用js来hack一下。
代码如下:
setFooter(0);//初始化的时候设置底部位置
function se stFooter(n) {
var oldTabHeight, oldMenuHeight, resultHeight;
var _inter = setInterval(function () {
var tabHeight = $('section.tabContainer:visible').height();
var menuHeight = $('.page-sidebar-menu').height();
if (oldTabHeight && oldMenuHeight && tabHeight !== oldTabHeight && menuHeight !== oldMenuHeight || ++n >= 3) {//如果比较三次值都没变,说明高度确实没变化,就没必要继续比较下去了。
resultHeight = Math.max(tabHeight, menuHeight) + 75 + 50;//比较左侧导航和中间容器的高度,最大的那个作为整个body的高度。木桶原理,一个木桶装多少水取决于最低的那个板条的高度。额,跟这个意思相反。
$('#DIV_1').css('top', resultHeight);//把footer的位置设为那个值。
$('body').css('height', resultHeight + 50);//body也设一下否则有滚动条
clearInterval(_inter);//都设置完事儿了还找个啥
}
oldTabHeight = tabHeight, oldMenuHeight = menuHeight;//不解释
}, 200);//本来以上代码执行时间在俺mac上是0.9毫秒,可是俺这可是macpro顶配机器,在我这快不代表其他人的也快,为了减少出错可能,扩大200倍!嘿嘿,是不是太自大了?
}
var timerForFooter = null;
$('body').click(function (event) {
var $target = $(event.target);
$target.parentsUntil('body').each(function (i, e) {
var targetClassName = $(e).attr('class');
if (/page-sidebar-menu/.test(targetClassName)) {
onLeftMenuChange(event);
}
if (/page-content-body/.test(targetClassName)) {
onLeftMenuChange(event);
}
});
function onLeftMenuChange(event) {
clearTimeout(timerForFooter);
timerForFooter = setTimeout(function () {
setFooter(0);
}, 0);
}
Interval的变态用法之:监听列表数据变化然后刷新页面
起因:今天又遇到一个bt需求,如题所说,要监听后端的列表数据是否变化,如果情况有变则刷新列表, 难点是作为当前页面只能作为被响应者而不能作为监听者,可是数据又不是ajax的方式,而是长在身上的,也就是刷新就不能监听,监听就不能刷新,所以想到克隆技术,克隆一个自己,自己监视克隆人的举动,如果发现有情况则自己刷新一下。或者叫做照镜子思路,看看镜子里的自己哪里不对劲就修饰哪里,so code as follows:
//自动刷新列表
var url = location.href;
var currentListAmount = $('#sample_1 tbody>tr').length;
if($('#anotherPage').length === 0 ){
$('body').append('<iframe id="anotherPage" src="'+ url +'" style="display:none;"></iframe>');
}
var interval = null;
handler();
function handler(){
clearInterval(interval);
interval = setInterval(function(){
try{
var iframeWin = $('#anotherPage')[0].contentWindow.window;
}catch(ex){
handler();
return;
}
if(iframeWin){
console.log(currentListAmount, iframeWin.$('#sample_1 tbody>tr').length)
if(currentListAmount !== iframeWin.$('#sample_1 tbody>tr').length){
window.location.reload();
}
}
$('#anotherPage').attr('src', url);
}, 5000);
}
谍照: