jQuery (окно). функция изменения размера запускается только один раз, а не каждый отдельный пиксель

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я использую этот приведенный ниже код для выполнения моей команды jQuery, как только размер окна будет изменен выше или ниже 771 пикселей. Как бы мне сказать браузеру, чтобы он выполнял код только один раз, когда он прерывается выше 771 пикселей, а затем снова, когда он возвращается ниже.

   jQuery(window).resize(function(){

        if (jQuery(window).width() >= 771){   
            console.log(">"); 

        }  

        if (jQuery(window).width() < 771){    
            console.log("<");    
        } 

   });
 

С помощью этого кода консоль регистрирует «<» один раз для каждого отдельного пикселя, который изменяется в окне браузера, поэтому много раз я хотел бы только один раз, когда он поднимается выше, и один раз, когда он возвращается ниже.

Ответ №1:

Браузер не сделает этого за вас. Вам нужно будет сохранить обработчик события изменения размера и сохранить предыдущую ширину в переменной. Затем сравните текущий с предыдущим.

Что-то вроде этого:

 var previousWidth = jQuery(window).width();
jQuery(window).resize(function(){
    var currentWidth = jQuery(window).width();
    var threshold = 771;

    if (previousWidth < threshold amp;amp; currentWidth >= threshold)
        console.log(">");

    if (previousWidth >= threshold amp;amp; currentWidth < threshold)
        console.log("<");

    previousWidth = currentWidth;
});