javascript - 从函数返回更新变量

Question

我正在尝试使用 javascript/jQuery 来查找窗口的宽度并在以后的函数中使用该变量。

$(function resizer() {

    function doneResizing() {
        var windowWidth = $(window).width();
        return windowWidth;
    }
    var getWidth = doneResizing();


    var id;
    $(window).resize(function() {
        clearTimeout(id);
        id = setTimeout(doneResizing, 0);
    });
    doneResizing();


    return getWidth;
});
var finalWidth = resizer()

因此，只要调整窗口大小时调整大小函数就会更新，并且 windowWidth 会自动更新。当变量在函数外部返回时，除非我刷新页面，否则 getWidth 不会随着窗口大小的调整而更新。有任何想法吗？我 2 周前刚开始学习 js/jq，我正在尽我最大的努力来解决返回和关闭问题，所以我可能忽略了这里的一些东西。谢谢。

Answer 1

执行以下操作会简单得多:

var finalWidth;

$( document ).ready(function() {
      //Set this the first time
      finalWidth = $(window).width();       

      $(window).resize(function() {
      //resize just happened, pixels changed
       finalWidth = $(window).width();

        alert(finalWidth); //and whatever else you want to do
        anotherFunction(finalWidth); 
    });
 });

并在外部使用 finalwidth，因为它是一个全局变量。您可以获得相同的功能，但没有复杂性。

更新

如评论所述，全局变量是不好的做法(例如 http://dev.opera.com/articles/view/javascript-best-practices/)。

为了避免全局变量 finalWidth 可以移到 document.ready 中，任何必要的函数都可以从 resize(function() { 事件处理程序。

更新2

由于拖动导致多次调整大小事件的问题，已更新代码。

引用:JQuery: How to call RESIZE event only once it's FINISHED resizing?

JSFiddle:http://jsfiddle.net/8ATyz/1/

$( document ).ready(function() {
      var resizeTimeout;

      $(window).resize(function() {
        clearTimeout(resizeTimeout);
        resizeTimeout= setTimeout(doneResizing, 500);      
     });

      doneResizing(); //trigger resize handling code for initialization 
 });


function doneResizing()
{
    //resize just happened, pixels changed
    finalWidth = $(window).width();

    alert(finalWidth); //and whatever else you want to do
    anotherFunction(finalWidth);    

}

function anotherFunction(finalWidth)
{
    alert("This is anotherFunction:"+finalWidth);   
}