歡迎使用CSDN-markdown編輯器

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

諜照：