变量在 js 中作为 NaN 返回

Question

我正在旋转模型。当我点击开始按钮时，它从 0

开始

start = animateAssembly

我正在尝试从 width 恢复。 width 的任何值都会在那里，我的动画将从那里开始。

resume = resumeAssembly

但宽度变量在框架内返回为 NaN。

并且没有进入 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 + "%";

    },

Answer 1

函数 frame() 中的 this 指的是 frame() 函数的上下文，而不是初始化 this.width[=15= 的父函数的上下文]

为避免这种情况，您可以将框架函数初始化为箭头函数：

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

Answer 2

这是函数作用域问题。在你的框架内，可能 this 没有提到你的想法。它可能针对 interval 本身。所以同时给函数

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

Answer 3

在 function frame() 里面你有一个不同的 this。要么使用箭头语法

const frame = () => {}

或更改呼叫站点。

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

Answer 4

在 function frame() 中访问 this.width 时存在范围问题。因为 frame 中的 this 与 animateAssembly 中的 this 不同。

所以当 frame 函数执行时 this.width 将是 undefined。所以 parseInt(undefined) 将是 NaN.

这可以通过两种不同的方式解决

使用箭头函数以便在 frame 函数中具有相同的 this 以及如下所示

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

您可以 bind 函数为 this 提供相同的参考，如下所示

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

希望这对您有所帮助。

变量在 js 中作为 NaN 返回

Variable is returning as NaN in js

html

javascript

tween