Как сравнить значение функции с числом?

Question

[seregindev]

Доброго времени суток!
Сейчас реализую мобильное меню при помощи Slideout.js
и столкнулся с такой проблемой, данное меню можно вызвать при любом разрешении, но мне нужно это делать только ширине окна 420 и меньше
Написав простую функцию сравнения, всё заработало, почти..

Если условие выполняется и мы решим расширить окно браузера, то скрипт будет работать
Написав незамысловатую функцию динамического отслеживания ширины экрана, столкнулся с другой проблемой
Теперь мне нужно сравнить, но я не понимаю как...

Буду очень признателен за помощь!

var disableSlideout = true;

function slideoutApp() {


    var slideout = new Slideout({
      'panel': document.getElementById('panel'),
      'menu': document.getElementById('menu'),
      'side': 'right'
    });
    if(!disableSlideout) {
      slideout.close()
    }
    document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
      slideout.toggle();

    });


}

window.onload = function () {
  var mobileWidth =  window.innerWidth;
  if (mobileWidth <= 768) {
    slideoutApp();
}
};


window.onresize = function () {
  var width = document.documentElement.clientWidth;
  if(width <= 768) {
    disableSlideout = true;
    slideoutApp();
  } else {
    disableSlideout = false;
    slideoutApp();
  }
}

Answer 1

[Сергей]

Если ты пишешь так, то нужно

window.onresize = function () {
  var resize = document.documentElement.clientWidth;
  return resize;
}
// или

function getResize() {
  var resize = document.documentElement.clientWidth;
  return resize;
}

И далее

// if (mobileWidth <= '420') {//здесь нужно сравнит функцию getResize с 420

if(onresize () <= 420){}
// или
if(getResize() <= 420){}

Comments

[seregindev]

Увы не получилось, либо я что-то не так сделал

window.onresize = function () {
  var resize = document.documentElement.clientWidth;
  return resize;
}

window.onload = function() {


  var scrollTop = window.pageYOffset;
  var topMenu = document.getElementsByClassName('.header-site');
  var mobileWidth =  window.innerWidth;

  if (onresize() <= 420 || mobileWidth <= '420') {
    var slideout = new Slideout({
      'panel': document.getElementById('panel'),
      'menu': document.getElementById('menu'),
      'side': 'right',

    });

    document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
      slideout.toggle();
    });

    document.querySelector('.menu').addEventListener('click', function(eve) {
      if (eve.target.nodeName === 'A') { slideout.close(); }
    });
  }
};

[Сергей]

seregindev: открой консоль. В своем коде перед if пропиши строчку напиши: debugger; У тебя браузер поставит breackpoint в этом месте. Далее пропиши onresize() в консоли. посмотри какой результат он отдает. Если все норм и выдает число, то ошибка не в вызове ф-ии.

[Stalker_RED]

Сергей: Как эта магия должна работать? Куда возвращается значение onresize() ?
Конечно, если в консоли вызвать getResize() (кстати, название не соответствует действительности, на самом деле это getWidth() какой-нибудь), то число выведтся. А при срабатывании события resize куда оно денется?

[Сергей]

Stalker_RED: ты какие-то странные вопросы задаешь :D Какой результат тебе необходим?

onresize - ответственно за изменение размеров окна браузера. Оно вызывается всегда, когда окно изменилось. В текущем случае onresize возвращает число, не производя никаких манипуляций.

onload - вызывается единожды в момент когда страница полностью загружена. Соответственно если if на условие экрана в onload, то проверка будет произведена 1 раз.

[Дмитрий Лузанов]

Сергей: это-то понятно, но как этим можно решить проблему, поставленную seregindev?

[seregindev]

Predve4niy: Я сделал следующим способом, разделил код на 3 функции, которые вызываются по мере срабатывания условия, всё вроде бы работает, но когда мы после того как у нас выполнится условие, всё окей, но затем я увеличиваю ширину экрана, тут же у нас должно пропадать меню, но увы не происходит такого(я обновил код в вопросе)

[Дмитрий Лузанов]

seregindev: вы вызываете функцию только при вбюпорте меньше или равном 768 "if (mobileWidth <= 768) {
slideoutApp();
}"