У меня есть сценарий, который выглядит так:
onResize = function() {
...
var oldWidth=currentWidth;
var currentWidth=$('.myDiv').width();
console.log('The value changed from '+oldWidth+' to '+currentWidth)
}
$(window).bind('resize', onResize);
Консоль ничего не отобразит для oldWidth.
Я попытался избавиться от var, чтобы использовать "$", чтобы переместить переменную вне функции, когда я читаю здесь, но я просто не могу заставить консоль отображать oldWidth.
Что мне нужно изменить и где мне нужно изменить его, чтобы получить текущую ширину в качестве глобальной переменной, которая может кормить oldWidth с его предыдущим значением каждый раз, когда вызывается onResize?
Спасибо.
Попробуйте либо добавить переменные в глобальную область. Например:
// initialise variables in the global scope
var oldWidth, currentWidth;
onResize = function() {
oldWidth=currentWidth;
currentWidth=$('.myDiv').width();
console.log('The value changed from '+oldWidth+' to '+currentWidth)
}
$(window).bind('resize', onResize);
$(window).load(function () {
// set initial values on window load
oldWidth = currentWidth = $('.myDiv').width();
});
Однако слово осторожности. Вероятно, стоит обратить внимание на то, чтобы изменить ваши события изменения размера (некоторые браузеры вызывают изменение размеров очень быстро, и это может привести к сбою некоторых из них, если вы делаете особенно тяжелый подъем на переднем конце). Посмотрите на что-то вроде Ben Almans Throttle/Debounce плагин jQuery.
ДАЛЬНЕЙШИЙ ОТВЕТ
Похоже, вы пытаетесь настроить только определенные ширины браузера в javascript. Я хотел бы предложить что-то вроде следующего: это будет инициировать события и разрешить глобальную проверяемую переменную (экраны основаны на исходной загрузке css)
$(function(){
onResize = function() {
if($(window).width() < 768 && !window.screenSizes.isMobile){
window.screenSizes = {
"isMobile" : true,
"isTablet" : false,
"isSmallDesktop" : false,
"isLargeDesktop" : false
};
// fire event for change to mobile
$(window).trigger('toMobile');
console.log($(window).width());
console.log(window.screenSizes);
}
if($(window).width() >= 768 && $(window).width() < 992 && !window.screenSizes.isTablet){
window.screenSizes = {
"isMobile" : false,
"isTablet" : true,
"isSmallDesktop" : false,
"isLargeDesktop" : false
};
// fire event for change to tablet
$(window).trigger('toTablet');
console.log($(window).width());
console.log(window.screenSizes);
}
if($(window).width() >= 992 && $(window).width() < 1200 && !window.screenSizes.isSmallDesktop){
window.screenSizes = {
"isMobile" : false,
"isTablet" : false,
"isSmallDesktop" : true,
"isLargeDesktop" : false
};
// fire event for change to small desktop
$(window).trigger('toSmallDesktop');
console.log($(window).width());
console.log(window.screenSizes);
}
if($(window).width() >= 1200 && !window.screenSizes.isLargeDesktop){
window.screenSizes = {
"isMobile" : false,
"isTablet" : false,
"isSmallDesktop" : false,
"isLargeDesktop" : true
};
// fire event for change to large desktop
$(window).trigger('toLargeDesktop');
console.log($(window).width());
console.log(window.screenSizes);
}
}
// example check inside other function
onSomethingElse = function (){
if(window.screenSize.isMobile){
// do somethingelse specifically for mobile
}
}
function attachEvents (){
// Ben Alman throttler to stop function spam during resize
// benalman.com/projects/jquery-throttle-debounce-plugin/
$(window).resize( $.throttle(350, onResize) );
// example function triggered when go to mobile
$(window).on('toMobile', function (){
// unload slideshow etc.
});
}
function initialize(){
// initialise variables in the global scope
window.screenSizes = {
"isMobile" : false,
"isTablet" : false,
"isSmallDesktop" : false,
"isLargeDesktop" : false
};
// bind events to elements
attachEvents();
// trigger initialization of resize variables
onResize();
}
initialize();
});