0

I have this program I am building, where the content loads based on the window width. On page load, it functions normally with the correct HTML and CSS attached. But when i resize the page, my ajax makes too many calls to load the appropriate sheets, causing the content to flicker annoyingly. There seems to be ten thousand answers for JQuery, but none for native Javascript. I have deducted, from many of these questions and answers on SO, that a timeout is needed to get one value on the COMPLETION of the resize function. but.. to no avail. even with the timeout, it still makes rapid calls to AJAX. This is what i have worked out so far.

function layoutHandler(){   
    if(window.innerWidth <= 400){
            // AJAX call
       } else if(window.innerWidth >= 401 && window.innerWidth <= 770){
            // AJAX call
       } else if(window.innerWidth >= 771 && window.innerWidth <= 1150){
            // AJAX call
    }else if(window.innerWidth >= 1150){
           // AJAX call
    }
}
window.onresize = layoutHandler;
layoutHandler();

This works fine on page load. The correct scripts fall into place. But when i resize the browser, in console.log, it makes an abundance of calls, making the page flicker drastically. As per the JQuery solutions, i tried several ways to get ONE value from window.onresize. STILL i could not get a single value, but persistent calls.
What i have tried, from what i read, was to comment out window.onresize = layoutHandler; and move layoutHandler(); to the bottom of the BODY. Then tried this...

    var resize1 = window.innerWidth;
    console.log(resize1);   
    function myFunction() {
       setTimeout(function(){
          cnt();
       }, 1000);    
    }   
    window.addEventListener("resize", myFunction);
    function cnt(){
    var resize2 = window.innerWidth;    
        if(resize1 != resize2){
            console.log('no match');
            //layoutHandler(); << this is where it makes repeated calls to the function
        }
    }
console.log(resize2);

Even with the timeout, it still reacts to every pixel increase with a call to the function. Except for the page flickering with all the calls, this works perfect. If i could get a SINGLE value, AFTER the resize event, my issue would be solved. Looking for a Native Javascript solution / suggestion.
TY in advance.

James Walker
  • 390
  • 4
  • 19
  • The answer in the question can easily be rewritten to plain js, as the main function already is – baao Mar 08 '16 at 09:58
  • 1
    Javascript debounce function https://davidwalsh.name/javascript-debounce-function – Lucky Mar 08 '16 at 10:00
  • a small hint, you can omit `window.innerWidth >= 401`, and the others comparisons with `>=`, because every value is greater or equal that value. – Nina Scholz Mar 08 '16 at 10:20
  • 1
    The debounce function was exactly what was needed. Fixed as fast as i could copy/paste it. Kuddo's to @Lucky. – James Walker Mar 08 '16 at 10:25

1 Answers1

2

try this

var size = null;
function layoutHandler(){ 
            if(window.innerWidth <= 400){
                    if(size != "small"){
                       // AJAX call
                    }
                    size = "small"
               } else if(window.innerWidth >= 401 && window.innerWidth <= 770){
                    if(size != "medium"){
                       // AJAX call
                    }
                    size = "medium"
               } else if(window.innerWidth >= 771 && window.innerWidth <= 1150){
                    if(size != "large"){
                       // AJAX call
                    }
                    size = "large"
            }else if(window.innerWidth >= 1150){
                   if(size != "extraLarage"){
                       // AJAX call
                    }
                    size = "extraLarage"
            }
        }
window.onresize = layoutHandler;
layoutHandler();
Zamboney
  • 2,002
  • 12
  • 22