関数の結果を使用して変数を更新するwindow resize Jquery

Question

グローバル変数をオンザフライで更新したい（ウィンドウのサイズ変更）。 body_size変数には、その下にある関数の結果が含まれているはずです。変数が範囲外にあることを理解していますが、どのように渡すかわかりません。助けてください。下記のスニペットをご覧ください。

$(document).ready(function() { 
 

 
    var body_size; // this updates correctly 
 

 
    var resizeTimer; 
 

 
    function setContainerWidth() { 
 
    body_size = $('.container').width(); 
 
    } 
 

 
    $(window).resize(function() { 
 

 
    clearTimeout(resizeTimer); 
 
    resizeTimer = setTimeout(function() { 
 

 
     setContainerWidth(); 
 
     
 

 
    }, 200); 
 

 
    }); 
 
    setContainerWidth(); 
 
    console.log(body_size); 
 

 
    var SlidesInView = 3; // this should update depending on result below : 
 
    $(window).on('resize', function() { 
 
    setContainerWidth(); // to check width on resize? 
 
    if (body_size => 980) { 
 
     SlidesInView = 4; // change SlidesInView above if condition is met. 
 
    } else if (body_size <= 640) { 
 
     SlidesInView = 1; //change SlidesInView above if condition is met. 
 
    } 
 
    }); 
 

 
    console.log(SlidesInView); 
 
    }); // doc ready

.container{ 
 
    height:100vh; 
 
    width:100vw; 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div class="container"> 
 
</div>

基本的にトップ変数body_sizeは、ユーザがウィンドウのサイズを変更するたびに値がそれ自体を更新しなければなりません。

Answer 1

変数body_sizeは、ウィンドウのサイズ変更イベントにのみ割り当てられ、console.logが実行されると、最初は未定義です。

ロード時に割り当てるように変更しました。

$(document).ready(function() { 
 

 
    var body_size; // this should hold the value of function below. This should get updates on window resize. 
 

 
    var resizeTimer; 
 
    
 
    function setContainerWidth() { 
 
     body_size = $('.container').width(); 
 
    } 
 
    
 
    $(window).resize(function() { 
 

 
     clearTimeout(resizeTimer); 
 
     resizeTimer = setTimeout(function() { 
 

 
     setContainerWidth(); 
 
     console.log(body_size); //retrieves actual width. 
 

 
     }, 200); 
 

 
    }); 
 
    
 
    setContainerWidth(); 
 
    console.log(body_size); //retrieves undefined, which means that body_size at the top is not updating. 
 
    }); // doc ready

.container{ 
 
    height:100vh; 
 
    width:100vw; 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div class="container"> 
 
</div>

Answer 2

私たちは状況を明確にしましょう：それはあなたがそれのトップレベルにしたい場合は、それを削除$(document).ready(function() {/*...*/});の内側にあるので、

1. body_sizeは、トップレベルではありませんfunctionからそれを外に宣言します。

2. あなたが宣言したbody_sizeは、イベント内で更新するのと全く同じ変数です。それは、同じ名前の変数がないためです。したがって、更新されておらず、使用しているものとは異なりますあなたのイベントの中は間違っています。あなたのscriptは、その前に実行されているとして、間違った値を出力

3. console.log

   は、あなたresizewindow前に実行されます。

あなたは物事が仕事のやり方を理解していることを確認するには、次のスクリプトを試してみてください。

var body_size; // this should hold the value of function below. This should get updates on window resize. 
    $(document).ready(function() { 

    var resizeTimer; 
    $(window).resize(function() { 

     clearTimeout(resizeTimer); 
     resizeTimer = setTimeout(function() { 

     body_size = $('.container').width(); 

     }, 200); 

    }); 
    }); // doc ready 

開き、ページとのdevのツールを。あなたのwindowのサイズを変更し、コンソールにこれを貼り付けます。

console.log(body_size); //retrieves actual width. 

出来上がり！ body_sizeが更新されました！