Why can't function in JavaScript "Class" call itself?

Question

I can't figure out what is wrong with this code. Firefox's error console tells me: "this.animateImgSlider is not a function".

What I would like is to call this.selectImage() with jsItems[0].selectImage(0) and then have this.animateImgSlider() be called some number of times until selfCall is false:

function WindowItem(inId) {
    this.id = inId;
    this.imgSliderTarget = 0;
    this.imgSlider = document.getElementById("imgSlider"+inId);

    this.animateImgSlider = function() {
        var selfCall = true;
        var currLeft = parseInt(this.imgSlider.style.left, 10);
        if (currLeft < this.imgSliderTarget) {
            currLeft += 8;
            if (currLeft >= this.imgSliderTarget) {
                currLeft = this.imgSliderTarget;
                selfCall = false;
            }
        }
        else {
            currLeft -= 8;
            if (currLeft <= this.imgSliderTarget) {
                currLeft = this.imgSliderTarget;
                selfCall = false;
            }
        }
        this.imgSlider.style.left = currLeft+"px";
        if (selfCall) setTimeout("this.animateImgSlider()", 0);
    }

    this.selectImage = function(inImg) {
        this.imgSliderTarget = -inImg*488;
        this.animateImgSlider();
    }
}
var jsItems = new Array();
jsItems.push(new WindowItem(0));

This line is the one that throws the error:

if (selfCall) setTimeout("this.animateImgSlider()", 0);

Ian · Accepted Answer · 2013-04-14 03:29:27Z

5

Use this instead:

if (selfCall) {
    var self = this;
    setTimeout(function () {
        self.animateImgSlider();
    }, 0);
}

(of course, it would make more sense to me to declare self at the top and use that throughout the function instead of this)

A string that is passed to setTimeout to execute is done so in the global scope, meaning this refers to window. It is not executed in the current scope, where the setTimeout call is.

On a side note, as a suggestion, I would move your animateImgSlider and selectImage methods outside, and into the WindowItem prototype, so that they can be shared by all instances, instead of creating a new anonymous function each time. So for example, you'd have:

function WindowItem(inId) {
    // blah blah
}

WindowItem.prototype.animateImgSlider = function () {
    // blah blah
};

WindowItem.prototype.selectImage = function(inImg) {
    // blah blah
};

The value of this will still refer to the specific instance, unless of course you attempt to use it in a string for the setTimeout parameter :)

This is clearly not required, as your code currently works fine, but it is a commonly used convention for declaring methods on a constructor function for instances to share.

edited Apr 14, 2013 at 3:29

answered Apr 14, 2013 at 3:24

Ian

51k13 gold badges104 silver badges111 bronze badges

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

4 Comments

Ian Over a year ago

@asimes No problem, glad it worked! I just updated my answer with some extra random things you might want to look at.

asimes Over a year ago

Not quite sure I understand the advantage of using prototype, what is being created each time in my code?

GriffLab Over a year ago

Prototype is a must if your object will be created many times, instead of recreating the object everytime in full, your object will inherit its prototype that are shared across all instances.

Ian Over a year ago

@asimes The methods created with prototype are done once and reference one place. With your code, every time you call new WindowItem(), the function is called, meaning it creates a new object and sets properties (and methods) by using this.X = Y for that specific new object. So every time that happens, it creates a new anonymous function and assigns it to animateImgSlider and another to selectImage. With prototype, it creates a property/method inherited by all objects constructed with new WindowItem(), and references a single anonymous function.

MNasir · Accepted Answer · 2013-12-10 12:01:03Z

2

You can use bind .here is the link

if (selfCall) {
    setTimeout(function () {
        this.animateImgSlider();
    }.bind(this), 0);
}

edited Dec 10, 2013 at 12:01

MNasir

1357 bronze badges

answered Apr 14, 2013 at 3:26

GriffLab

2,1764 gold badges20 silver badges22 bronze badges

Collectives™ on Stack Overflow

Why can't function in JavaScript "Class" call itself?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related