欢迎使用优快云-markdown编辑器

最新推荐文章于 2021-01-07 23:01:28 发布

原创最新推荐文章于 2021-01-07 23:01:28 发布 · 389 阅读

0 ·

CC 4.0 BY-SA版权

前端开发同时被 2 个专栏收录

21 篇文章

订阅专栏

javascript

9 篇文章

订阅专栏

本文介绍如何使用JavaScript的setTimeOut和setInterval方法实时监控容器高度变化，并据此动态调整页面元素位置，以解决布局问题。同时展示了通过克隆技术实现页面数据实时更新的方法，确保用户体验不受干扰。

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

如何利用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);
    }

谍照：