Отзывчивый Javascript

Question

Может кто-нибудь, пожалуйста, помогите с изворотливым, если заявлением, попробовать, как я мог, я не вижу ничего плохого с ним, что код работает, когда снаружи, если заявление:

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); 
}); 

EDIT: Это заявление должно быть верно как на документ, готовый или завершение изменения размера только тогда, когда изменения размеров окна от меньшего, чем sizeBreakPoint до больше, чем sizeBreakPoint - надеюсь, что это проясняет

EDIT: РЕШЕНИЕ

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. Это потому, что вы никогда не меняете свой размер. Перед тем как нагрузка на страницу.

Не могли бы вы рассказать мне, что вы действительно хотите проверить? Или если это то, что вы действительно хотите.

** редактировать: предложенное решение **

пытаются сделать что-то вроде этого:

$(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, делая следующий раз, когда вы идете, проверьте, будет ли sizeBefore всегда будет больше, чем sizeBreakPoint, чтобы оператор if не мог войти в 2 раза (и если вы не меняете sizeBefore вне if.

Надеюсь, это поможет.

Answer 2

Я думаю, что ваша проблема лежит в условии if. sizeBefore - это то, что ваша ширина экрана находится в событии готовности документа, которое, если у вас полноэкранный браузер, будет больше 500 (это ваше значение точки останова). Но вы никогда не обновляя sizeBefore, поэтому он никогда не будет ниже, чем sizeBreakPoint, и поэтому эта часть, если заявление не будет верно: (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 
} 

Вы определить, что каждая контрольная точка представляет и то, что она называется, таким образом, что она все еще имеет смысл когда вы начнете использовать условие позже в коде.