Question

希望你能帮忙

我当前的项目要求我在窗口调整大小时调用一组函数，这样我才能保持响应特性的正确性。然而，我使用的代码相当抽搐，因为它调用函数，即使窗口调整为1px。

我对jQuery相对较新，但每天都在学习越来越多，但这是我在努力寻找办法的方法。

在一个理想的世界里，我想在任何时候在一个断点上调整窗口大小时调用这些函数，例如：

说断点是500px，初始加载大小是400px，用户调整到600px，所以超过阈值所以再次调用函数。它还需要反向工作...所以窗口（或加载）大小为600px，断点为500px，调整为400px调用函数。

这是我目前的代码：

var windowWidth = $(window).width();

var resizing = !1;
 $(window).resize(function(a) {
   !1 !== resizing && clearTimeout(resizing);
   resizing = setTimeout(doResize, 200);
});

function doResize() {
  call_these_functions();       
}

为帮助人员干杯

感谢回复Zze

我正在使用类似于你所使用的东西，但我在我的功能开始时根据窗口大小过滤每件事情。我的问题是，这些过于频繁地被调用并导致问题/抽搐行为。

例如我在平板电脑上遇到问题我正在测试，当你向下滚动时，右边显示的滚动条似乎会触发窗口调整大小...导致再次调用函数，自动进行手风琴操作或.hide（）元素到它们的初始加载状态。

所以我的想法是，如果我可以测试它实际上打破了设定的阈值，而不是窗口的大小，那么它将更加可靠。

Answer 1

有一些非常方便的jQuery函数可供使用，看起来你非常接近自己解决这个问题。希望这会有所帮助。

$(window).resize(ResizeCode); // called on window resize
$(document).ready(function(e) { ResizeCode(); }); // called once document is ready to resize content immediatly

function ResizeCode()
{
   if ($(window).width() < 500){    
       //insertCode
   }
   else if($(window).width() >= 500){
       //insertCode
   }
}

的更新的的
如果我们想要'限制'这个函数的调用时间，那么你可以添加一个间隔，它在每次滴答时更新bool，然后在前面的代码中检查这个bool：

var ready = true;
setInterval(function(){ready = true;}, 3000);

function ResizeCode()
{
    if (ready)
    {
        // run code
        ready = false;
    }
}

但我建议将窗口的宽度和高度存储在var中，然后在调整窗口大小时将当前窗口与var进行比较，这样就可以判断窗口是否实际调整了大小超过'x'的数量，或者是否是你发现的奇怪的错误。

Answer 2

看起来我已经找到了一个解决方案，可以通过一点点工作来完成我所需要的工作（当我正在处理它时手指交叉），来自http://xoxco.com/projects/code/breakpoints/ < / p>

感谢Zze的帮助

JQuery - 测试窗口已经调整超过阈值

2 个答案: