响应式javascript

Question

有没有人可以帮我写一个不靠谱的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);
});  

Answer 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，让你下次检查if sizeBefore is时，它总是比sizeBreakPoint大，这使得if语句不可能按原样输入2次(如果你没有在if之外改变sizeBefore )。

希望这能有所帮助。

Answer 2

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

Answer 3

这并不是对这个问题的直接回答，只是我自己对一个响应式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
}

您可以定义每个断点表示的内容以及它的名称，这样当您稍后在代码中开始使用该条件时，它仍然有意义。