使用模塊模式時jQuery Window Resize事件未更新

我想要一個簡單的腳本，其中一些div設置爲加載頁面時窗口的w/h以及窗口的大小。這裏是我的代碼：使用模塊模式時jQuery Window Resize事件未更新

/* MODULE - RESIZE THE SCROLLER */ 
var resizeContainer = (function() 
{ 
    /* SETTINGS */ 
    var s = { 
     $scrollable : $('#scrollable'), 
     $sectionWrapper : $('#sectionwrapper'), 
     $scrollableChildren : $('.scrollableV'), 
     $childrenTotal : $('.scrollableV').length, 
     $navText : $('nav span'), 
     $winWidth : $(window).innerWidth(), 
     $winHeight : $(window).innerHeight(), 
     fontSize : parseInt($(window).width()/10)+'px' 
    }; 

    function init() 
    { 
     bindUIActions(); 
    } 

    function bindUIActions() 
    { 
     s.$scrollable.add(s.$scrollableChildren).css(
     { 
      width : s.$winWidth, 
      height : s.$winHeight 
     }); 

     s.$sectionWrapper.css(
     { 
      width : s.$winWidth * s.$childrenTotal, 
      height : s.$winHeight 
     }); 

     s.$navText.css(
     { 
      'font-size' : s.fontSize 
     }); 

     console.log(s.$winWidth); 
    } 

    return { init : init }; 
})(); 




$(document).ready(function() 
{ 
    /* CALL RESIZE MODULE */ 
    resizeContainer.init(); 
}); 

$(window).on('resize', function() 
{ 
    /* CALL RESIZE MODULE */ 
    resizeContainer.init(); 
});

當我打電話resizeContainer在文件準備控制檯給我的窗口大小，但是當我調整不更新值窗口。任何人都可以幫我理解爲什麼？提前謝謝了。

來源

2013-05-03 mtwallet

我看不出你的代碼有什麼問題，但是，resize事件得到了特殊的行爲，這使得它經常調用兩次（取決於瀏覽器）。你可以試試這個，看看它爲你工作：

$(document).ready(function() 
{ 
    var timeoutResize; 
    $(window).on('resize', function() 
    { 
     clearTimeout(timeoutResize); 
     timeoutResize = setTimeout(resizeContainer.init,100); 
    }).triggerHandler('resize'); 
});

來源

2013-05-03 10:51:27

感謝您的回覆。可悲的是，這不適用於我想要的任何瀏覽器。 – mtwallet 2013-05-03 10:55:39

是否觸發了resize事件？使用控制檯測試它 – 2013-05-03 10:57:19

我已經嘗試過，是的，它被解僱了 – mtwallet 2013-05-03 10:58:39

我想通了。 resizeContainer在doc準備就緒時調用，它帶有s的所有值。當窗口調整大小時，它只是調用resizeContainer中的init（）函數，並且不再引用s。這是我更新的代碼，它的作品：

/* MODULE - RESIZE THE SCROLLER */ 
var resizeContainer = (function() 
{ 
    /* SETTINGS */ 
    var s = { 
     $scrollable : $('#scrollable'), 
     $sectionWrapper : $('#sectionwrapper'), 
     $scrollableChildren : $('.scrollableV'), 
     $childrenTotal : $('.scrollableV').length, 
     $navText : $('nav span') 
    }; 

    function init() 
    { 

     bindUIActions(); 
    } 

    function bindUIActions() 
    { 

     s.$scrollable.add(s.$scrollableChildren).css(
     { 

      width : $(window).width(), 
      height : $(window).height() 

     }); 

     s.$sectionWrapper.css(
     { 
      width : $(window).width() * s.$childrenTotal, 
      height : $(window).height() 
     }); 

     s.$navText.css(
     { 
      'font-size' : parseInt($(window).width()/4)+'%' 
     }); 

     console.log($(window).width()); 
    } 

    return { init : init }; 
}()); 




$(document).ready(function() 
{ 
    /* CALL RESIZE MODULE */ 
    resizeContainer.init(); 
}); 

$(window).on('resize', function() 
{ 
    /* CALL RESIZE MODULE */ 
    resizeContainer.init(); 
});

希望這是有道理的。

來源

2013-05-03 13:16:07 mtwallet

使用模塊模式時jQuery Window Resize事件未更新

回答

相關問題