Variable is returning as NaN in js

Question

I am rotating a model. When I click start button it starts from 0

start = animateAssembly

I am trying to resume from width. What ever value of width will be there my animation will start from there.

resume = resumeAssembly

but width variable returning as NaN inside frame.

and not getting passed into resumeAssembly

animateAssembly: function() {

        var element = document.getElementById("myBar");

        this.width = 1;

        clearInterval(this.interval);
        this.interval = setInterval(frame, 100);

        //here my width shows number
        console.log(typeof this.width);

        function frame() {
            if (this.width >= 100) {
                console.log(typeof this.width);
                clearInterval(this.interval);
            } else {
                this.width++;
                console.log(typeof parseInt(this.width));
                console.log(typeof this.width);

                //here it shows as NaN
                element.style.width = parseInt(this.width) + '%';
                element.innerHTML = parseInt(this.width) + "%";

            }
        }

    },


    pauseAssembly: function() {
        clearInterval(this.interval);
        this.tweening.stop();

    },


    resumeAssembly: function() {
        var element = document.getElementById("myBar");
        element.style.width = this.width + '%';
        element.innerHTML = this.width + "%";

    },

Definitely relevant (maybe a duplicate): [How to access the correct `this` inside a callback?](https://stackoverflow.com/q/20279484/218196) — Felix Kling, Jul 01 '20 at 07:26

score 0 · Answer 1 · answered Jul 01 '20 at 07:23

The this in your function frame() refers to the context of the frame() function, not of the parent function in which you initialized this.width

To avoid this, you can initialize your frame function as an arrow function:

const frame = () => {
    // here, 'this' refers to the parent's scope
}

score 0 · Accepted Answer · answered Jul 01 '20 at 07:23

0

this is a function scope problem. Inside your frame, probably this doesn't refer what you think. It's probably targeting interval itself. So while giving function

this.interval = setInterval(frame.bind(this), 100); // bind current target

answered Jul 01 '20 at 07:23

halilcakar

1,628
1
12
18

Thank you. It worked. And learned something new too. – xMayank Jul 01 '20 at 07:44

score 0 · Answer 3 · answered Jul 01 '20 at 07:25

0

inside function frame() you have a different this. Either use arrow syntax

const frame = () => {}

or change calling site.

this.interval = setInterval(frame.bind(this), 100);

answered Jul 01 '20 at 07:25

R Pasha

700
5
21

score 0 · Answer 4 · answered Jul 01 '20 at 07:30

There is scope problem when you are accessing this.width inside function frame(). Because this inside frame is different that this inside animateAssembly.

So When frame function getting executed then this.width will be undefined. So parseInt(undefined) will be NaN.

This can be solved in two different ways

Use arrow function in order have same this inside frame function as well like below

const frame = () => {
    //rest of the code
}

You can bind the function to have same reference for this like below

this.interval = setInterval(frame.bind(this), 100);

Hope this helps.

Variable is returning as NaN in js

4 Answers4