使用窗口调整大小的函数结果更新变量jquery

我想动态更新全局变量（窗口大小）。 body_size变量应该包含它下面的函数的结果。我明白变量不在范围之内，但是我不知道如何将它传递出去。请帮忙。请参阅下面的代码片段。使用窗口调整大小的函数结果更新变量jquery

$(document).ready(function() { 
 

 
    var body_size; // this updates correctly 
 

 
    var resizeTimer; 
 

 
    function setContainerWidth() { 
 
    body_size = $('.container').width(); 
 
    } 
 

 
    $(window).resize(function() { 
 

 
    clearTimeout(resizeTimer); 
 
    resizeTimer = setTimeout(function() { 
 

 
     setContainerWidth(); 
 
     
 

 
    }, 200); 
 

 
    }); 
 
    setContainerWidth(); 
 
    console.log(body_size); 
 

 
    var SlidesInView = 3; // this should update depending on result below : 
 
    $(window).on('resize', function() { 
 
    setContainerWidth(); // to check width on resize? 
 
    if (body_size => 980) { 
 
     SlidesInView = 4; // change SlidesInView above if condition is met. 
 
    } else if (body_size <= 640) { 
 
     SlidesInView = 1; //change SlidesInView above if condition is met. 
 
    } 
 
    }); 
 

 
    console.log(SlidesInView); 
 
    }); // doc ready

.container{ 
 
    height:100vh; 
 
    width:100vw; 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div class="container"> 
 
</div>

基本上顶可变body_size应该用一个值，每当用户改变窗口更新自身。

来源

2016-11-06 user7121582

这里没有什么意外的事，它实际上更新了你的变量。但是在'window.resize'里面只有当你调整窗口的大小时才会触发。 'console.log'在'document.ready'中，当它被记录时，事件还没有被触发。 –

变量body_size仅在窗口大小调整事件中被赋值，并且在执行console.log时初始值不确定。

我已将其修改为在负载上分配。

$(document).ready(function() { 
 

 
    var body_size; // this should hold the value of function below. This should get updates on window resize. 
 

 
    var resizeTimer; 
 
    
 
    function setContainerWidth() { 
 
     body_size = $('.container').width(); 
 
    } 
 
    
 
    $(window).resize(function() { 
 

 
     clearTimeout(resizeTimer); 
 
     resizeTimer = setTimeout(function() { 
 

 
     setContainerWidth(); 
 
     console.log(body_size); //retrieves actual width. 
 

 
     }, 200); 
 

 
    }); 
 
    
 
    setContainerWidth(); 
 
    console.log(body_size); //retrieves undefined, which means that body_size at the top is not updating. 
 
    }); // doc ready

.container{ 
 
    height:100vh; 
 
    width:100vw; 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div class="container"> 
 
</div>

来源

2016-11-06 08:32:27 Aruna

我相信你不应该修改脚本以便在加载时分配，因为操作者想要动态更新它。正如你正确地发现的那样，他的错误是假定外部console.log在每次调整大小后都被执行，所以我们能做的最好的就是尽可能精确地解释操作符的期望和现实之间的差异，以帮助他/她理解基本面。 –

看来，我整个上午都在追风。这确实在运行中检索宽度。我已将它添加到我的代码中。我必须在窗口大小调整上比较body_width来确定许多要显示的块。即使body_size为，SlidesInView也不会更新。我试图比较窗口大小的情况，但似乎我失去了一些东西。最后的想法是获取容器的宽度，然后检查满足哪些条件并检索变量值（SlidesInView）..请检查我的代码片段 – user7121582

@ user7121582，您原来的body_size刷新问题已被回答两次。如果这些答案中的任何一个正在解决你最初的问题，那么你可以接受它。更新反映了一个新问题，应该在一个新问题中雄辩地提出。 –

让我们弄清情况：

body_size不是顶级的，因为它是内部$(document).ready(function() {/*...*/});如果你想使它顶层，将其删除从function并宣布它在它之外。
您声明的body_size与您在事件中更新的变量完全相同，因为没有变量具有相同的名称，因此您假定它未更新，并且与您使用的变量不同你的事件内部是错误的。
的console.log输出错误的值作为你的script是之前执行你resize的window之前执行。

要确保你了解事情的工作方式，可以试试下面的脚本：

var body_size; // this should hold the value of function below. This should get updates on window resize. 
    $(document).ready(function() { 

    var resizeTimer; 
    $(window).resize(function() { 

     clearTimeout(resizeTimer); 
     resizeTimer = setTimeout(function() { 

     body_size = $('.container').width(); 

     }, 200); 

    }); 
    }); // doc ready

打开的页面和开发工具。调整你的window，然后粘贴到控制台这样的：

console.log(body_size); //retrieves actual width.

瞧！ body_size已更新！

来源

2016-11-06 08:35:41

使用窗口调整大小的函数结果更新变量jquery

回答

相关问题