Question

我正在尝试一个简单的脚本，当页面加载时以及调整窗口大小时，某些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时，控制台会给出窗口大小，但是当我调整窗口大小时，值不会更新。谁能帮我理解为什么？非常感谢提前。

Answer 1

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

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

Answer 2

我明白了。在doc ready上调用resizeContainer，它带来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();
});

希望这是有道理的。

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

2 个答案: