Using this in method with jQuery

Question

I have a problem catching my object data in jQuery methods:

this.start = function() {
            var prepend = '<img id = "' + this.imageList[0].name + '" class = "desktop_image_slider_prepended_image" src = "res/img/' + this.imageList[0].name + '.png"></img>';
            $("#desktop_image_slider").prepend(prepend);
            this.boxList.shift(this.imageList[0]);
            $("#" + this.boxList[this.boxList.length-1].name).animate({"width":"0%"}, 500);
            $("#" + this.imageList[0].name).animate({"width":"11.1111111111%"}, 500, function() {
                $("#" + this.boxList[this.boxList.length-1].name).remove();
                this.imageList.push(this.boxList[this.boxList.length-1]);
                this.boxList.splice(this.boxList.length-1, 1);
                $timeout(function() {
                    this.start();
                }, 1000);
            });
        }

It throws undefined. It is obviously taking something from jQuery not from my method. Is there a way to access my method?

Thanks!

The this referenced in your animate function event handler is referencing the calling event function. Not your global this. You can either use .bind(this) or use const _self = this; and then reference _self.imageList. — VtoCorleone
– VtoCorleone, Commented Jun 14, 2017 at 19:36
use @VtoCorleone reply as it is the proper way to use this in Jquery — aorfevre
– aorfevre, Commented Jun 14, 2017 at 19:40
Yes that the best way and I was able to make it work with Your comment, You were the first to answer You should post an answer so I can vote it if You would like. — Avoid
– Avoid, Commented Jun 14, 2017 at 19:54
Just posted an answer for the street cred. Glad this worked @EnvironmentGenerator — VtoCorleone
– VtoCorleone, Commented Jun 14, 2017 at 20:09

seersol · Accepted Answer · 2017-06-14 19:37:18Z

2

try to pass the object this as a parameter in the function.

answered Jun 14, 2017 at 19:37

seersol

574 bronze badges

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

Comments

VtoCorleone · Accepted Answer · 2017-06-14 20:08:24Z

The this referenced in your animate function event handler is referencing the calling event function. Not your global this. You can either use .bind(this) or use const _self = this; and then reference _self.imageList

This example uses const _self = this.

start = function() {
    var prepend = '<img id = "' + this.imageList[0].name + '" class = "desktop_image_slider_prepended_image" src = "res/img/' + this.imageList[0].name + '.png"></img>';
    $("#desktop_image_slider").prepend(prepend);
    this.boxList.shift(this.imageList[0]);
    $("#" + this.boxList[this.boxList.length-1].name).animate({"width":"0%"}, 500);
    var _self = this;
    $("#" + this.imageList[0].name).animate({"width":"11.1111111111%"}, 500, function() {
        $("#" + _self[_self.boxList.length-1].name).remove(); // _self is used instead of this
        _self.imageList.push(_self.boxList[_self.boxList.length-1]); // _self is used instead of this
        _self.boxList.splice(_self.boxList.length-1, 1); // _self is used instead of this
        $timeout(function() {
            _self.start(); // _self is used instead of this
        }, 1000);
    });
}

This example uses bind

this.start = function() {
    var prepend = '<img id = "' + this.imageList[0].name + '" class = "desktop_image_slider_prepended_image" src = "res/img/' + this.imageList[0].name + '.png"></img>';
    $("#desktop_image_slider").prepend(prepend);
    this.boxList.shift(this.imageList[0]);
    $("#" + this.boxList[this.boxList.length-1].name).animate({"width":"0%"}, 500);
    $("#" + this.imageList[0].name).animate({"width":"11.1111111111%"}, 500, function() {
        $("#" + this.boxList[this.boxList.length-1].name).remove();
        this.imageList.push(this.boxList[this.boxList.length-1]);
        this.boxList.splice(this.boxList.length-1, 1);
        $timeout(function() {
            this.start();
        }.bind(this), 1000); // set function's scope to `this`
    }.bind(this)); // set function's scope to `this`

ControlAltDel · Accepted Answer · 2017-06-14 19:37:31Z

When you go into another function context, this will be different. Therefore, store this in another variable first

start = function() {
            var prepend = '<img id = "' + this.imageList[0].name + '" class = "desktop_image_slider_prepended_image" src = "res/img/' + this.imageList[0].name + '.png"></img>';
            $("#desktop_image_slider").prepend(prepend);
            this.boxList.shift(this.imageList[0]);
            $("#" + this.boxList[this.boxList.length-1].name).animate({"width":"0%"}, 500);
            var oldThis = this;
            $("#" + this.imageList[0].name).animate({"width":"11.1111111111%"}, 500, function() {
                $("#" + oldThis.boxList[this.boxList.length-1].name).remove();
                oldThis.imageList.push(this.boxList[this.boxList.length-1]);
                oldThis.boxList.splice(this.boxList.length-1, 1);
                $timeout(function() {
                    oldThis.start();
                }, 1000);
            });
        }

James · Accepted Answer · 2017-06-14 19:38:00Z

Any time you define an anonymous function to be called at a later time you will lose your expected this. One way to fix it is to use bind, for example:

this.start = function() {
    var prepend = '<img id = "' + this.imageList[0].name + '" class = "desktop_image_slider_prepended_image" src = "res/img/' + this.imageList[0].name + '.png"></img>';
    $("#desktop_image_slider").prepend(prepend);
    this.boxList.shift(this.imageList[0]);
    $("#" + this.boxList[this.boxList.length-1].name).animate({"width":"0%"}, 500);
    $("#" + this.imageList[0].name).animate({"width":"11.1111111111%"}, 500, function() {
        $("#" + this.boxList[this.boxList.length-1].name).remove();
        this.imageList.push(this.boxList[this.boxList.length-1]);
        this.boxList.splice(this.boxList.length-1, 1);
        $timeout(function() {
            this.start();
        }.bind(this), 1000); // bind this to timeout callback
    }.bind(this)); // bind this to animate callback
}

amiramw · Accepted Answer · 2017-06-14 19:39:30Z

1

Use the arrow function to maintain the same this for the anonymous function lexical context:

$("#" + this.imageList[0].name).animate({"width":"11.1111111111%"}, 500, () => {
  ... with this
}

answered Jun 14, 2017 at 19:39

amiramw

5162 silver badges10 bronze badges

Collectives™ on Stack Overflow

Using this in method with jQuery

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related