从函数返回更新变量答案

【问题标题】：Return updating variable from function从函数返回更新变量
【发布时间】：2013-09-24 07:13:30
【问题描述】：

我正在尝试使用 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()

因此，每当调整窗口大小时，resize 函数都会更新，windowWidth 会自动更新。当变量在函数外部返回时，getWidth 不会随着窗口大小调整而更新，除非我刷新页面。有任何想法吗？两周前我刚拿起 js/jq，我正在尽我最大的努力来解决退货和关闭问题，所以我可能在这里忽略了一些东西。谢谢。

【问题讨论】：

我已经弄清楚为什么您的代码只能在重新加载时工作。重新加载时，var getWidth = doneResizing(); 被执行，return getWidth 被执行，直到 finalWidth 被分配。但是，此后每当调整窗口大小时，都会调用setTimeout(doneResizing, 0);。 setTimeout 对来自 doneResizing() 的返回值不做任何事情。

标签： javascript jquery variables

【解决方案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

由于拖拽导致多次resize事件的问题，代码已更新。

参考：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);   
}

【讨论】：

另外，请确保将其包装在您的 $(document).ready 函数中。
你不应该鼓励人们使用全局变量来做这类事情。这些事情应该始终在他们自己的范围内。
没错，他可以将 finalWidth 移动到 ready 中，并通过传递变量来调用他想要的任何函数。谢谢！
我刚刚试用了您的解决方案，现在可以在其他函数中使用该变量。但唯一的问题是当我调整窗口大小时它不会动态更新，只有在我刷新时才会更新。你知道我是怎么做到的吗？
@cat-t 我已经更新了代码并包含了一个指向 JSFiddle 的链接。我忽略了为什么你有超时。最好在doneResizing() 函数中分配finalWidth，然后从那里传递它。 jsfiddle.net/8ATyz/1 。在 JSFiddle 中，每当调整窗口大小时都会触发警报。

【解决方案2】：

您将 resizer 函数与 jQuery ready 函数混淆了。要跟踪窗口宽度，您可以这样做

(function ($) {
    var windowWidth;
    // when the document is fully loaded
    $(function(){
        // add an resize-event listener to the window
        $(window).resize(function(){
            // that updates the variable windowWidth
            windowWidth = $(window).width();
        })
        // trigger a resize to initialize windowWidth
        .trigger('resize');

        // use windowWidth here.
        // will be updated on window resize.
    });

}(jQuery));

【讨论】：