使用模块模式时，jQuery Window Resize 事件未更新答案

【问题标题】：jQuery Window Resize event not updating when using module pattern使用模块模式时，jQuery Window Resize 事件未更新
【发布时间】：2013-05-03 10:41:36
【问题描述】：

我正在尝试一个简单的脚本，其中一些 div 在页面加载时以及在调整窗口大小时设置为窗口的 w/h。这是我的代码：

/* 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 时，控制台会为我提供窗口大小，但是当我调整窗口大小时，值不会更新。谁能帮我理解为什么？非常感谢。

【问题讨论】：

标签： jquery resize

【解决方案1】：

我看不出您的代码有什么问题，但是，resize 事件有特定的行为，这使得它经常调用两次（取决于浏览器）。你可以试试这个，看看它是否适合你：

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

【讨论】：

感谢您的回复。遗憾的是，这不适用于我正在尝试的任何浏览器。
resize 事件被触发了吗？使用控制台测试它

【解决方案2】：

我想通了。 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();
});

希望这是有道理的。

【讨论】：