javascript - ネイティブ Javascript は、サイズ変更後にブラウザーの幅を取得し、関数を実行します

Question

ウィンドウの幅に基づいてコンテンツが読み込まれる、このプログラムを作成しています。ページの読み込み時には、適切な HTML と CSS が添付されていれば正常に機能します。しかし、ページのサイズを変更すると、適切なシートをロードするために ajax があまりにも多くの呼び出しを行うため、コンテンツがちらつきます。JQuery には 1 万の答えがあるようですが、ネイティブ Javascript には答えがありません。SOに関するこれらの質問と回答の多くから、サイズ変更関数のCOMPLETIONで1つの値を取得するにはタイムアウトが必要であると推測しました。しかし..無駄に。タイムアウトがあっても、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ソリューションに従って、から1つの値を取得する方法をいくつか試しましたwindow.onresize。それでも私は単一の値を取得できませんでしたが、永続的な呼び出しです。
私が読んだことから、私が試したことは、コメントアウトし てBODYの一番下に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.