使用窗口調整大小的函數結果更新變量jquery

我想動態更新全局變量（窗口大小）。 body_size變量應該包含它下面的函數的結果。我明白變量不在範圍之內，但是我不知道如何將它傳遞出去。請幫忙。請參閱下面的代碼片段。使用窗口調整大小的函數結果更新變量jquery

$(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應該用一個值，每當用戶改變窗口更新自身。

來源

2016-11-06 user7121582

這裏沒有什麼意外的事，它實際上更新了你的變量。但是在'window.resize'裏面只有當你調整窗口的大小時纔會觸發。 'console.log'在'document.ready'中，當它被記錄時，事件還沒有被觸發。 –

變量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>

來源

2016-11-06 08:32:27 Aruna

我相信你不應該修改腳本以便在加載時分配，因爲操作者想要動態更新它。正如你正確地發現的那樣，他的錯誤是假定外部console.log在每次調整大小後都被執行，所以我們能做的最好的就是儘可能精確地解釋操作符的期望和現實之間的差異，以幫助他/她理解基本面。 –

看來，我整個上午都在追風。這確實在運行中檢索寬度。我已將它添加到我的代碼中。我必須在窗口大小調整上比較body_width來確定許多要顯示的塊。即使body_size爲，SlidesInView也不會更新。我試圖比較窗口大小的情況，但似乎我失去了一些東西。最後的想法是獲取容器的寬度，然後檢查滿足哪些條件並檢索變量值（SlidesInView）..請檢查我的代碼片段 – user7121582

@ user7121582，您原來的body_size刷新問題已被回答兩次。如果這些答案中的任何一個正在解決你最初的問題，那麼你可以接受它。更新反映了一個新問題，應該在一個新問題中雄辯地提出。 –

讓我們弄清情況：

body_size不是頂級的，因爲它是內部$(document).ready(function() {/*...*/});如果你想使它頂層，將其刪除從function並宣佈它在它之外。
您聲明的body_size與您在事件中更新的變量完全相同，因爲沒有變量具有相同的名稱，因此您假定它未更新，並且與您使用的變量不同你的事件內部是錯誤的。
的console.log輸出錯誤的值作爲你的script是之前執行你resize的window之前執行。

要確保你瞭解事情的工作方式，可以試試下面的腳本：

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

打開的頁面和開發工具。調整你的window，然後粘貼到控制檯這樣的：

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

瞧！ body_size已更新！

來源

2016-11-06 08:35:41

使用窗口調整大小的函數結果更新變量jquery

回答

相關問題