Fatal编程技术网
  • javascript/
  • Javascript Jquery（Window）.Resize（）调用函数不正确

Javascript Jquery（Window）.Resize（）调用函数不正确

javascript jquery html css

Javascript Jquery（Window）.Resize（）调用函数不正确,javascript,jquery,html,css,Javascript,Jquery,Html,Css,基本上，我有一个相应调整元素大小的函数，jquery在窗口调整大小结束时触发该函数 当我将窗口重新调整到原始大小时，它可以完美地工作，我看不到与刷新页面相同的东西。考虑到调用了完全相同的函数，这很奇怪 问题可以现场查看 Js： var waitForFinalEvent = (function () { var timers = {}; return function (callback, ms, uniqueId) { if (!uniqueId) { uniqueId = "Don't

基本上，我有一个相应调整元素大小的函数，jquery在窗口调整大小结束时触发该函数

当我将窗口重新调整到原始大小时，它可以完美地工作，我看不到与刷新页面相同的东西。考虑到调用了完全相同的函数，这很奇怪

问题可以现场查看

Js：

var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
  uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
  clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();




$(window).resize(function () {
waitForFinalEvent(function(){

loadcontext();

  //...
}, 10, "some unique string");
});



function loadcontext() {

var winwidth = window.innerWidth;
var winheight = window.innerHeight;

<!-- Fixes layout on screens -->    

if (winwidth < 1200)
{   
$('#blockscontainer').css("left", (winwidth / 2)*-1 );
$('.block').css("width", (winwidth - 30)/ 5 );  
$('.block').css("height", (winwidth - 30)/ 7.5 );
$('#blockscontainer').css("width", winwidth -20);
}
else
{
$('#blockscontainer').css("left", (1200 / 2)*-1 );
$('.block').css("width", 1173 / 5 );
}   

};
HTML：

<body onload="loadcontext()">
<div id="content">
<div id="contentcontain" align="center">
<div id="blockscontainer">
<div id="blockcontext">
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>



</div>
</div>
</div>
<center>
<div id="footer">
content
</div>
</center>
</div>
</body>
</html>


测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
测试内容
内容
当您将窗口的大小调整到1200 px以下时，您可以调用以下行：

$('.block').css("height", (winwidth - 30)/ 7.5 );
$('#blockscontainer').css("width", winwidth -20);
这些导致了您所看到的问题，因为当您将窗口大小增加回1200px左右时，它们不会重置为任何默认值。这会导致页面看起来不同，因为#blockscontainer的宽度和每个.block元素的高度都已更改。

演示链接非常有用。但是，您仍然应该在问题中输入相关代码。如果这个链接消失了，这个问题对其他人还是有帮助的。首先，如果你使用的是jQuery，不要有任何突兀的JS。ie:body onload=“”。。。这很糟糕。了解$（document.ready（）；第二，你如何描述你正在努力完成的事情，因为你的代码是。。。。好。。。jQuery将为您处理许多高级代码，以完成我认为您正在尝试执行的简单任务。如果您查看控制台，会发现错误“UncaughtTypeError:无法读取undefined的属性'nodeName'，”这基本上就是我的问题所在，不过我及时添加了必要的行，从而解决了这个问题。谢谢你。 
$('.block').css("height", (winwidth - 30)/ 7.5 );
$('#blockscontainer').css("width", winwidth -20);