每当创建自定义 class 的多个对象时，浏览器就会冻结

Question

我一直在修补 JavaScript 类（在这种情况下，我制作了一个名为 dropCoin 的），我正在尝试制作 'coins' 并让他们推动每个其他周围。然而，在即将创建第二个硬币的瞬间，选项卡冻结了。我在任何地方都找不到这个问题的答案，所以我希望有人能回答为什么 setInterval 会这样中断？

注意：问题不是直接出自大型物理计算块，我在添加之前就出现了这个问题。但是，它也可能会导致一些问题？另一个注意：它不是来自setInterval的duration，我已经将它设置为超过5秒并且浏览器仍然挂起。

var mCoinArray = [];
var tiers = [{set:'1',val:5}]; //Unused ATM, will be important later
var dropTier = 0;
var CPMachine = $('#CPBox');
var dropTimer = 0;
var dropTime = 40; //This is in frames, game runs ~20FPS
//end variable init
class dropCoin {
    constructor(pos,x,y,tier) {
        this.pos = pos;
        this.x = x + 80;
        this.y = y;
        this.physX = this.x + 30;
        this.physY = this.y + 30;
        this.xAccel = 0;
        this.yAccel = 0;
        this.tier = tier;
        this.visual = $("<div class='coin'></div>");
        this.visual.appendTo(CPMachine);
        this.visual.css('top',this.y);
        this.visual.css('left',this.x);
        setTier(this.pos,dropTier);
    }
    recalc(x,y,ax,ay) {
        this.x = x - 30;
        this.y = x - 30;
        this.physX = x;
        this.physY = y;
        this.xAccel = ax;
        this.yAccel = ay;
        this.visual.css('top',this.y);
        this.visual.css('left',this.x);
    }
    deleteMe() {
        mCoinArray[this.pos] = undefined;
    }
}
function generateCoin(x,y) {//430x, 240y maximum values
    let MApos = 0;
    let whiler = true;
    while(whiler) {
        let i = 0;
        if (mCoinArray[i] == undefined) {
            whiler = false;
            MApos = i;
        } else { i++; }
    }
    mCoinArray[MApos] = new dropCoin(MApos,x,y,dropTier);
}
function setTier(mIndex, tier) { //{background: "url(CoinSheetT[#]L.png) n60 n60"} n = 0, 1, or 2
    let set = (Math.floor(tier / 9)).toString();
    tier = tier % 9;
    switch(tier) {
        case 0:
            $(mCoinArray[mIndex]).css({background: "url(CoinSheetT" + set + "L.png) 0 0"})
            break;
        case 1:
            mCoinArray[mIndex].css({background: "url(CoinSheetT1L.png) 60 0"})
            break;
        case 2:
            mCoinArray[mIndex].css({background: "url(CoinSheetT1L.png) 120 0"})
            break;
        case 3:
            mCoinArray[mIndex].css({background: "url(CoinSheetT1L.png) 0 60"})
            break;
        case 4:
            mCoinArray[mIndex].css({background: "url(CoinSheetT1L.png) 60 60"})
            break;
        case 5:
            mCoinArray[mIndex].css({background: "url(CoinSheetT1L.png) 120 60"})
            break;
        case 6:
            mCoinArray[mIndex].css({background: "url(CoinSheetT1L.png) 0 120"})
            break;
        case 7:
            mCoinArray[mIndex].css({background: "url(CoinSheetT1L.png) 60 120"})
            break;
        case 8:
            mCoinArray[mIndex].css({background: "url(CoinSheetT1L.png) 120 120"})
            break;
    }
}
var gameLoop = setInterval(function(){
    dropTimer++;
    if (dropTimer >= dropTime) {
        dropTimer = 0;
        generateCoin(Math.floor(Math.random() * 431),Math.floor(Math.random() * 241));
    }
    for (i=0;i<mCoinArray.length;i++) { // PHYSICS
        let targX = mCoinArray[i].physX;
        let targY = mCoinArray[i].physY;
        let targAcX = mCoinArray[i].xAccel;
        let targAcY = mCoinArray[i].yAccel;
        let checkX = [];
        let checkY = [];
        let dist;
        for (j=0;j<mCoinArray.length;j++) {
            if (j != i) {
                if (j < i) {
                    checkX[j] = mCoinArray[j].physX;
                    checkY[j] = mCoinArray[j].physY;
                } else {
                    checkX[j-1] = mCoinArray[j].physX;
                    checkY[j-1] = mCoinArray[j].physY;
                }
            }
        }//physics equation; y = -4.27494(x)^0.36907 + 15
        let resAcX = (targAcX * 1)/5;
        let resAcY = ((targAcY * 1)/5) - 5;
        for (j=0;j<checkX.length;j++) {
            let distance = Math.sqrt(Math.pow(checkX[j] - targX,2) + Math.pow(checkY[j] - targY,2));
            let angle = Math.atan2(checkY[j] - targY, checkX[j] - targX);
            let power = Math.pow(-4.27494 * distance, 0.36907) + 15;
            if (power < 0) {
                power = 0;
            }
            resAcX += Math.cos(angle) * power;
            resAcY += Math.sin(angle) * power;
        }
        let resX = targX + resAcX;
        let resY = targY + resAcY;
        mCoinArray[i].recalc(resX, resY, resAcX, resAcY);
    } // End Physics
}, 50);

Answer 1

您在 while 循环中将 i 重新初始化为零，因此它不会像您期望的那样递增，您陷入了无限循环。

确保初始化发生在你的循环之外，这样你就不会经常重置它。

// i should be initialized here so the incrementing works
// let i = 0;
while(whiler) {
    let i = 0; // infinite loop caused by reinitializing i to zero every iteration
    if (mCoinArray[i] == undefined) {
        whiler = false;
        MApos = i;
    } else { i++; }
}

每当创建自定义 class 的多个对象时，浏览器就会冻结

Browser freezes whenever more than one object of a custom class is created

javascript

class

javascript-objects

setinterval