Object Oriented Javascript Error Object Is Not A Function

Question

I'm trying to create a simple marquee that simply changes in intervals. I am just trying to understand objects in Javascript. Currently, I am receiving the error, object is not a function.

var marquee = {

            domElement: jQuery( 'span' ),
            titles: [ 'First', 'Second', 'Third', 'Fourth' ],
            current: '',
            next: 0,

            _getCurrent: function(){

                this.current = this.domElement.text();

            },

            _setNext: function(){

                this.next = this.titles.indexOf( this.current ) + 1;

            },

            changeHeading: function(){

                this._getCurrent();
                this._setNext();
                this.domElement.text( this.titles[ this.next ] );

            }

        };

var marqueeInterval = setInterval( marquee.changeHeading, 700 );

Any help on why I can't get this to work would be greatly appreciated. I am new to Object Oriented Javascript, and am just trying to understand. Thanks!

jAndy · Accepted Answer · 2014-10-30 12:20:54Z

3

By passing the function reference of changeHeading to setInterval, you will lose context on each call. You either prevent that by adding an additional function like

setInterval(function() {
    marquee.changeHeading();
}, 700);

or invoke Function.prototype.bind like

var marqueeInterval = setInterval( marquee.changeHeading.bind( marquee ), 700 );

answered Oct 30, 2014 at 12:20

jAndy

237k57 gold badges313 silver badges363 bronze badges

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

1 Comment

mcbeav Over a year ago

Brilliant! So basically, "this" no longer refers to marquee when being passed to setInterval? Am I understanding this correctly?

Arun P Johny · Accepted Answer · 2014-10-30 12:20:16Z

2

Since you are passing marquee.changeHeading as a callback to the setInterval() method, when the method is invoked the execution context will not be marquee object

You can either use the Function.bind() as shown below

var marqueeInterval = setInterval( marquee.changeHeading.bind(marquee), 700 );

or a custom callback which will invoke the target method like

var marqueeInterval = setInterval( function(){
    marquee.changeHeading();
}, 700 );

answered Oct 30, 2014 at 12:20

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Mihir · Accepted Answer · 2014-10-30 12:26:18Z

0

Since you are using jQuery, simplest way to run your code is to replace your last line to line below

var marqueeInterval = window.setInterval($.proxy(marquee.changeHeading, marquee), 700);

answered Oct 30, 2014 at 12:26

Mihir

4495 silver badges11 bronze badges

Collectives™ on Stack Overflow

Object Oriented Javascript Error Object Is Not A Function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related