Is javascript namespace polluted?

问题

I do not have a good grasp of the js namespace and am WAGing* re the title, but that's one of my guesses about what's happening.

WAG = Wild Guess

My app is crashing (dramatically); trying to figure out why. In fact, after 3 Q/A pairs, it blows up the entire Chrome tab..! I'm beginning to suspect I've done something wrong in my code...

Warning: Save your browsing session before running these jsFiddles. (In Chrome, the jsFiddle only blows up its own tab but I can't comment on other browsers)

jsFiddle One
jsFiddle Two - dupe in case jsFiddle One blown away

Please help me to understand exactly which spectacular moronism I've committed today.

HTML:

<div id="result">
    <div class="truth tr0"><h2>---</h2></div>
    <div class="truth tr1"><h2>answer to one</h2></div>
    <div class="truth tr2"><h2>answer to two</h2></div>
    <div class="truth tr3"><h2>answer to three</h2></div>
    <div class="truth tr4"><h2>answer to four</h2></div>
 </div>   
<div id="replaceLink">
    <div class="youcould yc1">
        <a href="#2"><h2>QUESTION ONE</h2></a>
    </div>
    <div class="youcould yc2">
        <a href="#3"><h2>QUESTION TWO</h2></a>
    </div>
    <div class="youcould yc3">
        <a href="#4"><h2>QUESTION THREE</h2></a>
    </div>
    <div class="youcould yc4">
        <a href="#5"><h2>QUESTION FOUR</h2></a>
    </div>
    <div class="youcould yc5">
        <a href="#6"><h2>THANK YOU</h2></a>
    </div>
</div>

<div id="response"></div>
<input type="button" id="mybutt" value="Start Test" />

Javascript/jQuery:

var cnt = 0;
var window = {};
window.arrDone = [];

function nextQues() {
    if (window.arrDone.length == 4) return 5;

    success = 0;
    while (success == 0) {
        nn = Math.floor(Math.random() * 3) + 1;
        if (window.arrDone.indexOf(nn) == -1 && nn != 5) {
            success++;
            window.arrDone.push(nn);
        }
    }
    return nn;
}

$('.youcould, .truth').hide();
$('.tr0').show();

$('.youcould').click(function() {
    $(this).hide();
    thisA = window.arrDone[window.arrDone.length -1];
    $('.tr'+thisA).show();
});

$('.truth').click(function() {
    $(this).hide();
    nextQ = nextQues();
    $('.yc'+nextQ).show();
});

$('#mybutt').click(function () {
    $(this).hide();
    $('.tr0').hide();
    nextQ = nextQues();
    $('.yc'+nextQ).show();
});

回答1:

Your while loop runs infinitely on the third pass because it doesn't meet the condition.

回答2:

My guess would be

var window = {};

window is special, so creating a global variable named window is begging for trouble.

回答3:

At some point, arrDone will contain the numbers 1, 2, and 3, as produced by your random generator (which will never produce 5, btw). In that case, nextQues() does not abort and return five (as arrDone.lenght == 3), and will enter the loop. Your random generator produces nothing but the numbers 1, 2, and 3, which always are already in the array, so the if-condition (that would end the loop) is never fulfilled. You have an infinite loop generating random numbers.

I guess you want

function nextQues() {
    var l = 4;
    if (window.arrDone.length >= l)
        return l+1;

    while (true) {
        var nn = Math.floor(Math.random() * l) + 1; // generate 1, 2, 3 or 4
        if (window.arrDone.indexOf(nn) == -1) {
            window.arrDone.push(nn);
            return nn;
        }
    }
}

来源：https://stackoverflow.com/questions/18855434/is-javascript-namespace-polluted

标签

javascript

jquery

jsfiddle