How do i pass this to SetTimeout() function in javascript?

Question

  var workViewer = {
    container: document.documentElement,
    popup: document.querySelector('.avgrund-popup'),
    cover: document.querySelector('.avgrund-cover'),

    init: function () {
        this.addClass(this.container, 'avgrund-ready');
        window.avgrund = {
            activate: this.activate,
            deactivate: this.deactivate,
            disableBlur: this.disableBlur
        };
    },
    activateModal: function (state) {
        setTimeout(function () {
            this.parent.removeClass(popup, 'no-transition'); //this line
            this.parent.addClass(this.container, 'avgrund-active');  //this line
        }, 0);
    },


    removeClass: function (element, name) {
        element.className = element.className.replace(name, '');
    }
};


module.exports = workViewer;

I want to pass this into setTimeout function, whats the right way to do it?

This is my first post, please let me know if i can improve it in any way

var that = this; function() { that.parent...

user234461
– user234461

2016-03-22 21:58:45 +00:00
Commented Mar 22, 2016 at 21:58 — user234461
– user234461, Commented Mar 22, 2016 at 21:58
Thank you! this is what i was looking for.

Agu V
– Agu V

2016-03-22 22:01:35 +00:00
Commented Mar 22, 2016 at 22:01 — Agu V
– Agu V, Commented Mar 22, 2016 at 22:01

Mike Cluck · Accepted Answer · 2016-03-22 22:01:52Z

7

There's two major ways. The first is saving a reference to this and using it instead:

var self = this;
setTimeout(function() {
  self.parent.removeClass(popup, 'no-transition');
  self.parent.addClass(self.container, 'avgrund-active');
}, 0);

The other is to use bind to create a new function with this bound to the given value.

setTimeout(function() {
  this.parent.removeClass(popup, 'no-transition');
  this.parent.addClass(this.container, 'avgrund-active');
}.bind(this), 0);

If you're running in an environment that supports them, you can also use an arrow function.

setTimeout(() => {
  this.parent.removeClass(popup, 'no-transition');
  this.parent.addClass(this.container, 'avgrund-active');
}, 0);

answered Mar 22, 2016 at 22:01

Mike Cluck

32.6k13 gold badges84 silver badges95 bronze badges

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

Comments

madox2 · Accepted Answer · 2016-03-22 21:59:32Z

2

You can use Function.prototype.bind(). It creates function which is bounded to the given context:

setTimeout(function () {
    this.parent.removeClass(popup, 'no-transition'); //this line
    this.parent.addClass(this.container, 'avgrund-active');  //this line
}.bind(this), 0);

answered Mar 22, 2016 at 21:59

madox2

52.3k21 gold badges106 silver badges101 bronze badges

Collectives™ on Stack Overflow

How do i pass this to SetTimeout() function in javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related