CODEWITHSUNDEEP
javascriptimagesyntaxonloadstrict
Randall Flagg
Randall Flagg

Reputation: 5118

Set variable within another context

I have the following function 

"use strict";
function Player
{
    this.width;
    this.height;
    this.framesA = 5;

    this.image = new Image();
    this.image.onload = function ()
    {
        width = this.width;
        height = this.height / framesA;
    }
    this.image.src = "Images/angel.png";
}

How can I make this code to work?
I want the width and height in the Player function be inalized with the width and the height of the image when the onload function is called.

I need this to work with strict mode (A must).

If this should be accomplished another way feel free to teach.

EDIT: I updated the code to reflect a more realistic situation(I didn't know this will be so complicated)

EDIT 2: Another update to the code. I didn't notice that I wrote var insted of this. Sorry.

Thanks in advance

Upvotes: 2

Views: 1063

Answers (4)

Felix Loether
Felix Loether

Reputation: 6198

What I gathered from your comments was that you want to be able to access the width and height from outside the Player function and the problem is that you don't know when the width and height are available.

If that is correct, it gets a bit more complicated. Since you don't know when the image will be loaded and can't have the width and height before it's loaded (unless you specify them in the img tag server-side), you need to use a function that takes a callback to access the player's width and height.

Basically, if the width and height are not known yet, the function just puts the callback in a queue. When the width and height are determined, all of the functions in the queue get called with the width and height being passed to them as arguments. If the dimensions are already know when the function is called, it should just immediately call the callback function with the correct arguments.

Here's how I'd do this:

function Player() {
    'use strict';

    // Store this in a variable so the onload handler can see it.
    var that = this;
    var callbacks = [];

    this.frames = 5;

    this.getDimensions = function (callback) {
        // We don't have the dimensions yet, so put the callback in the queue.
        callbacks.push(callback);
    };

    this.image = new Image();
    this.image.onload = function () {
        var width = this.width;
        var height = this.height / that.frames;

        // Call each of the registered callbacks.
        var i;
        for (i = 0; i < callbacks.length; i += 1) {
            callbacks[i](width, height);
        }
        // Don't keep unnecessary references to the functions.
        callbacks = null;

        // We now know the dimensions, so we can replace the getDimensions
        // function with one that just calls the callback.
        that.getDimensions = function (callback) {
            callback(width, height);
        };
    };
    this.image.src = "Images/angel.png";
}

And here's how you'd access the dimensions:

var p = new Player();
p.getDimensions(function (width, height) {
    console.log("Player's width is " + width + " and height is " + height);
});

Upvotes: 2

dfsq
dfsq

Reputation: 193281

This variant passes through JSLint without any problem and also works well. So what's the problem?

function Player() {
    "use strict";
    var width, height;
    this.image = new Image();
    this.image.onload = function () {
        width = this.width;
        height = this.height;
    };
    this.image.src = "Images/angel.png";
}

Note that you should place "use strict"; inside function rather then outside.

Upvotes: 0

Devin Burke
Devin Burke

Reputation: 13820

Just set your variables and do your manipulations from within the onload event and they will stay in scope.

"use strict";
function Player
{
    this.image = new Image();
    this.image.src = "Images/angel.png";
    this.image.onload = function ()
    {
        var width = this.width;
        var height = this.height;
        // Do your manipulations within the `onload` event.
    } 
}

Upvotes: 2

Ruan Mendes
Ruan Mendes

Reputation: 92294

Here's what Šime Vidas really means

"use strict";
function Player {
    this.image = new Image();
    this.image.src = "Images/angel.png";
}

Player.prototype.getWidth = function() {
    return this.image.width;
}

or if you like closure based objects

function Player {
    this.image = new Image();
    this.image.src = "Images/angel.png";
    this.getWidth = function() {
      return this.image.width;
    }
}

Upvotes: 0

Related Questions