Return updating variable from function

Question

I'm trying to use javascript/jQuery to find the width of the window and use the variable in a later function.

$(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()

So the resize function updates whenever the window is resized and windowWidth is updated automatically. When the variable is returned outside of the function, getWidth doesn't update with a window resize unless I refresh the page. Any ideas? I just picked up js/jq 2 weeks ago, and I'm doing my best to wrap my head around returns and closures, so I may have overlooked something here. Thanks.

I've figured out why your code only worked on reload. On reload, var getWidth = doneResizing(); is executed, and return getWidth is executed leading up to finalWidth being assigned. However, after that whenever the window is resized, setTimeout(doneResizing, 0); is called. setTimeout does nothing with the returned value from doneResizing(). — Μenelaοs
– Μenelaοs, Commented Sep 19, 2013 at 10:02

Community · Accepted Answer · 2017-05-23 11:45:09Z

2

it would be much simpler to do the following:

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); 
    });
 });

and use finalwidth outside as it is a global variable. You get the same functionality without the complexity.

Update

As commented, global variables are bad practice ( e.g. also http://dev.opera.com/articles/view/javascript-best-practices/ ).

To avoid a global variable finalWidth can be moved inside document.ready and any necessary functions can be called from inside resize(function() { event handler.

Update 2

Due to the problem with dragging causing multiple resize events, code has been updated.

Reference: 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);   
}

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Sep 19, 2013 at 9:21

Μenelaοs

24.4k20 gold badges98 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

BenM Over a year ago

Also, make sure to wrap it in your $(document).ready function.

jukempff Over a year ago

You should not encourage people to use globals for that kind of stuff. Those things should always be in their own scope.

Μenelaοs Over a year ago

True, he can move finalWidth inside ready and call any function he wants by passing the variable. Thanks!

cat-t Over a year ago

I just tried out your solution, and I can now use the variable in other functions. But the only problem is that it doesn't update dynamically when I resize the window, only when I refresh. Do you know how I would be able to do that?

Μenelaοs Over a year ago

@cat-t I've updated the code and included a link to a JSFiddle. I had overlooked why you have the timeout. It's better to assign finalWidth within the doneResizing() function, and pass it from there. jsfiddle.net/8ATyz/1 . In the JSFiddle the alerts are fired whenever the window is resized.

|

jukempff · Accepted Answer · 2013-09-19 09:20:23Z

2

You have mixed up your resizer function with the jQuery ready function. To keep track on the window width you can do

(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));

answered Sep 19, 2013 at 9:20

jukempff

9656 silver badges12 bronze badges

Collectives™ on Stack Overflow

Return updating variable from function

2 Answers 2

Update

Update 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

Update 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related