Как вызывать функцию при ресайзе окна по одному разу при одном условии?

Question

[Илья]

Добрый вечер!

var f_windowWidth = function (w) {
          if (w <= n) {
              console.log("Window width <= " + n);
          } else {
              console.log("Window width > " + n)
          }
    };
    
    var n = 800, w = window.innerWidth;
    
    f_windowWidth(w);
    $(window).on("resize", function () {
        var w = window.innerWidth;
        f_windowWidth(w); 
    });

Как сделать так, чтобы был вывод функции в консоли по одному разу при смене рубежа в 800 пкс. Т.е., допустим, мы запустили скрипт на 1000px, нам вывелось сообщение о том, что ширина окна больше 800px, а дальше, когда сужаем окно выводится множество сообщений о том, что ширина окна больше 800px, а когда мы перешли рубеж в 800px и продолжаем сужать окно, выводится множество сообщений о том, что ширина окна меньше 800px. В общем, задача такая: избавиться от этих множеств, а выводить сообщение только 1 раз при смене рубежа 800px. Нужно как-то отслеживать предыдыдущую ширину окна?

Answer 1

[Ульян Романов]

var minResize = false;
var maxResize = false;

var f_windowWidth = function (w) {

          if (w <= n && !minResize) {
              minResize = true;   
              maxResize = false;
              console.log("Window width <= " + n);
          } 

          if (w >= n && !maxResize) {
              maxResize = true;
              minResize = false;
              console.log("Window width > " + n);
          }
    };
    
    var n = 800, w = window.innerWidth;
    
    f_windowWidth(w);
    $(window).on("resize", function () {
        var w = window.innerWidth;
        f_windowWidth(w); 
    });

Comments

[Илья]

Во, супер, спасибо) Вы этим пользуетесь в своих проектах?

[Ульян Романов]

Илья, пока что нет необходимости :D

Answer 2

[Dima Polos]

$(function(){
let timer;
let anyTime = 300; // любое время
$(window).on('resize', () => {
if (timer !== undefined){
clearTimeout(timer);
}
else{
timer = setTimeout(() =>{
// все, что надо сделать после ресайза, тут всякие проверки и так далее можно
}, anyTime);
}
});

Суть кода такая, что создаем переменную пустую, когда происходит ресайз окна - ставится таймаут на действие, которое будет выводить сообщение, каждый пиксель будет вызывать функцию, которая обрабатывает ресайз, и внутри функции - проверка, что если таймер уже задан, то его надо обнулить. Это дает нам то, что пока ресайз окна не завершится, никаких сообщений не увидим, а как только ресайз закончится, то отработает самый последний таймаут и после окончания ресайза, через anyTime, например 300мс, увидим сообщение. Таймаут можно ставить любой, просто 300мс не заметит человек, но будет достаточно, чтобы отследить окончание ресайза. Внутри функции в таймауте можно писать любые проверки и код. Такое "отложенное действие" можно запустить после прохождения 800пкс, добавить внутрь обработчика ресайза проверку на ширину окна.

Comments

[Илья]

$(function(){
    var f_windowWidth = function (w) {
          if (w <= n) {
              console.log("Window width <= " + n);
          } else {
              console.log("Window width > " + n)
          }
    };
    
    var n = 800, w = window.innerWidth, timer, anyTime = 300;
    
    f_windowWidth(w);
    
    $(window).on('resize', function () {
        if (timer !== undefined) {
            clearTimeout(timer);
        } else {
            timer = setTimeout(function () {
                var w = window.innerWidth;
                f_windowWidth(w);
            }, anyTime);
        }
    });
    
});

Странно, не работает, как положено.

[Dima Polos]

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

[Илья]

Dima Polos, Я бы сказал совсем не так =) Можно сказать не работает. Срабатывает 1 раз, когда, например окно на всю ширину (больше 800px), нажимаю свернуть в окно (меньше 800px) - тогда выводит хорошо, но дальше вообще не работает. Что-то странное)

[Dima Polos]

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