1

任何人都可以帮助一个狡猾的 if 语句，尝试我可能看不出它有什么问题，代码在 if 语句之外工作：

var sizeBefore;
var sizeAfterResize;
var sizeBreakPoint;
var resizeTimer; 
$(function() {
    sizeBefore = $(window).width();
    sizeBreakPoint = 500;
    doneResizing();       
});

function doneResizing(){
       sizeAfterResize = $(window).width();
       if ((sizeBefore < sizeBreakPoint) && (sizeAfterResize >= sizeBreakPoint)) {
                alert('Before:' + sizeBefore);
                alert('After:' + sizeAfterResize);
                sizeBefore = sizeAfterResize;
                // THIS RUNS WHEN OUTSIDE IF STATEMENT
       }
}


$(window).resize(function() {
    //doneResizing();
     clearTimeout(resizeTimer);
     resizeTimer = setTimeout(doneResizing, 100);
});

编辑：当窗口的大小从小于调整sizeBreakPoint为大于时，此语句应该只在文档准备好或完成调整大小时才适用sizeBreakPoint- 希望这能澄清

编辑：解决方案

var sizeBefore;
var sizeAfterResize;
var sizeBreakPoint;
var resizeTimer; 
$(function() {
    sizeBefore = $(window).width();
    sizeBreakPoint = 500;
    doneResizing();       
});

function doneResizing(){
       sizeAfterResize = $(window).width();
       if ((sizeBefore < sizeBreakPoint) && (sizeAfterResize >= sizeBreakPoint)) {
                alert('Before:' + sizeBefore);
                alert('After:' + sizeAfterResize);
       }
       sizeBefore = sizeAfterResize;
}


$(window).resize(function() {
     clearTimeout(resizeTimer);
     resizeTimer = setTimeout(doneResizing, 100);
});
4

3 回答 3

1

好吧，如果我可以说：

if ((sizeBefore < sizeBreakPoint) && (sizeAfterResize >= sizeBreakPoint))

仅当您的窗口从小于 500 开始并且在您调整大小后超过 500 时才适用。这是因为您在页面加载之前从不更改 sizeBefore 。

你能告诉我你真正想验证什么吗？或者，如果这是你真正想要的。

** 编辑：建议的解决方案 **

尝试做这样的事情：

$(function() {
   sizeBreakPointMin = 480;
   sizeBreakPointMax = 520;
   doneResizing();       
});

function doneResizing(){
   sizeAfterResize = $(window).width();
   //this way you have a window where this is false and it's as you want to allow the window as in a fine size
   //you can garantie that the window is always bigger then 480 and smaller then 520
   if ((sizeAfterResize < sizeBreakPointMin) || (sizeAfterResize >= sizeBreakPointMax)) {
            alert('Before:' + sizeBefore);
            alert('After:' + sizeAfterResize);
            // THIS RUNS WHEN OUTSIDE IF STATEMENT
   }
}

从你的代码：

 if ((sizeBefore < sizeBreakPoint) && (sizeAfterResize >= sizeBreakPoint)) {
            ...
            sizeBefore = sizeAfterResize;
 }

这两行不能很好地结合在一起，因为第一次这是真的，你只是sizeAfterResize >= sizeBreakPoint保证下次去检查 ifsizeBefore总是会更大，然后sizeBreakPoint使 if 语句无法输入 2 次（如果你不会sizeBefore在 if 之外改变。

希望这可以帮助。

于 2013-03-01T15:34:35.757 回答
0

我认为您的问题在于 if 条件。 sizeBefore是在文档就绪事件中您的屏幕宽度是多少，如果您有一个全屏浏览器，它将大于 500（这是您的断点值）。但是您永远不会更新sizeBefore，因此它永远不会低于sizeBreakPoint，因此 if 语句的这一部分永远不会为真：(sizeBefore < sizeBreakPoint)

于 2013-03-01T15:24:52.190 回答
0

这不是问题的直接答案，只是我自己对响应式的扭曲JavaScript

// calculate viewport width so that we can load js conditionally
function responsive(){
    var scaffolding = 'desktop';
    var w = parseInt($(window).innerWidth(), 10);
    if (w > 0 && w < 768) { scaffolding = 'phone'; }
    if (w >= 768 && w <= 980) { scaffolding = 'tablet'; }
    if (w > 980) { scaffolding = 'desktop'; }
    return scaffolding;
}

if ( responsive() == phone ) {
    // do stuff only on phones
}
if ( responsive() != phone ) {
    // do stuff everywhere else but phones
}

您可以定义每个断点代表什么以及调用什么，这样当您稍后在代码中开始使用条件时它仍然有意义。

于 2014-01-21T16:37:52.437 回答