Исходный Javascript получает ширину браузера после изменения размера, затем запускает функцию

Question

У меня есть эта программа, которую я создаю, где содержимое загружается в зависимости от ширины окна. При загрузке страницы он нормально функционирует с прикрепленным HTML и CSS. Но когда я изменяю размер страницы, мой аякс делает слишком много вызовов для загрузки соответствующих листов, в результате чего контент мерцает. Кажется, есть десять тысяч ответов для JQuery, но ни один из них для собственного Javascript. Я вычитал из многих из этих вопросов и ответов на SO, что необходим тайм-аут, чтобы получить одно значение в ЗАВЕРШЕНИИ функции изменения размера. но .. безрезультатно. даже с таймаутом, он по-прежнему совершает быстрые вызовы AJAX. Это то, что я разработал до сих пор.

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(); 

Это прекрасно работает при загрузке страницы. Правильные сценарии встают на свои места. Но когда я изменяю размер браузера, в console.log, он изобилует звонками, делая страницу мерцающей резко. В соответствии с решениями JQuery, я попробовал несколько способов получить одно значение от window.onresize. STILL я не мог получить ни одно значение, но постоянные вызовы.
То, что я пробовал, из того, что я читал, должен был прокомментировать window.onresize = layoutHandler; и переместить layoutHandler(); на дно ТЕЛА. Потом попробовал это ...

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); 

Даже с тайм-аут, он по-прежнему реагирует на каждое увеличение пикселей с вызовом функции. За исключением того, что страница мелькает со всеми вызовами, это работает отлично. Если бы я мог получить значение SINGLE, ПОСЛЕ события изменения размера моя проблема будет решена. Ищите собственное решение/предложение Javascript.
TY заранее.

Answer 1

попробовать это

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();