Javascript 递归调用产生范围错误

Question

我正在尝试让以下脚本正常工作，但是当它进入 continueAnimation 函数时，它不会更新 cPreloaderTimeout 变量，而是在 'Uncaught RangeError: Maximum call stack size exceeded'.

中运行

    var loadingIcon = {

    cSpeed : 8,
    cWidth : 64,
    cHeight : 32,
    cTotalFrames : 7,
    cFrameWidth : 64,
    cImageSrc : 'sprites.png',

    cImageTimeout : false,
    cIndex : 0,
    cXpos : 0,
    cPreloaderTimeout : false,
    SECONDS_BETWEEN_FRAMES : 0,

    startAnimation : function() {
        document.getElementById('loaderImage').style.backgroundImage='url('+ this.cImageSrc+')';
        document.getElementById('loaderImage').style.width=this.cWidth+'px';
        document.getElementById('loaderImage').style.height=this.cHeight+'px';

        //FPS = Math.round(100/(maxSpeed+2-speed));
        FPS = Math.round(100/this.cSpeed);
        SECONDS_BETWEEN_FRAMES = 1 / FPS;

        this.cPreloaderTimeout = setTimeout( this.continueAnimation(), SECONDS_BETWEEN_FRAMES/1000);

    },

    continueAnimation : function() {
        this.cXpos += this.cFrameWidth;
        //increase the index so we know which frame of our animation we are currently on
        this.cIndex += 1;

        //if our cIndex is higher than our total number of frames, we're at the end and should restart
        if (this.cIndex >= this.cTotalFrames) {
            this.cXpos =0;
            this.cIndex=0;
        }

        if(document.getElementById('loaderImage'))
            document.getElementById('loaderImage').style.backgroundPosition=(-this.cXpos)+'px 0';


        this.cPreloaderTimeout = setTimeout(this.continueAnimation(), SECONDS_BETWEEN_FRAMES*1000);
    },

    stopAnimation : function(){//stops animation
        clearTimeout( this.cPreloaderTimeout );
        this.cPreloaderTimeout = false;
    }

}

jQuery( document ).ready(function() {

    jQuery( document ).on("click", "#test", function(){

        var loader = loadingIcon;

        loader.startAnimation();

        setTimeout( loader.stopAnimation(), 3000);

    });
});

起初它是一个普通的 javascript 脚本，但我正在尝试从中创建一个对象，以便它可以重复使用并同时多次使用。现在的问题是当 startAnimation 或 continueAnimation 被触发时，cPreloaderTimeout 变量没有正确设置。

Answer 1

你有几个问题。

首先，您的 cPreloaderTimeout 不会像您想象的那样设置，因为您没有创建带有原型的对象，因此该函数中 this 的范围将是函数本身，而不是对象。

其次，setTimeout 接受一个函数，但是当您尝试使用它时您正在调用该函数，因此发送到 setTimeout 的值将是函数的结果，而不是函数本身。

改为考虑格式：

function LoadIcon() {
  this.cSpeed = 8;
  // All your other properties
}

LoadIcon.prototype.startAnimation = function() { 
  // your startAnimation function, concluding with
  this.preloaderTimeout = setTimeout(this.continueAnimation.bind(this), SECONDS_BETWEEN_FRAMES/1000); 
}

// the rest of the methods built the same way

//then, your calling code would look like:

var loadIcon = new LoadIcon();
loadIcon.startAnimation();

编辑我更新了 setTimeout 调用，因为我忘记了绑定到 this 以在回调触发时进行正确的范围界定。

Javascript 递归调用产生范围错误

Javascript recursive call creates range-error

javascript

stack-overflow

methods

object