获得无限循环,无法理解为什么 - Javascript

时间:2016-06-09 09:18:47

标签: javascript jquery html css

我正在写一个简单的小连接4游戏,我在我的一个功能上遇到无限循环:

var reds = 0;
var greens = 0;

function checkEmpty(div) {
    var empty = false;
    var clicked = $(div).attr('id');
    console.log(clicked);
    var idnum = parseInt(clicked.substr(6));
    while (idnum < 43) {
        idnum = idnum + 7;
    }
    console.log("idnum=" + idnum);
    while (empty == false) {
        for (var i = idnum; i > 0; i - 7) {
            idnumStr = idnum.toString();
            var checking = $('#square' + idnumStr);
            var str = checking.attr('class');
            empty = str.includes('empty');
            console.log(empty);
            var divToFill = checking;
        }
    }

    return divToFill;
}

function addDisc(div) {
    if (reds > greens) {
        $(div).addClass('green');
        greens++;
        console.log("greens=" + greens);
    } else {
        $(div).addClass('red');
        reds++;
        console.log("reds=" + reds);
    };
    $(div).removeClass('empty');
}

$(function() {
    var i = 1;
    //add a numbered id to every game square
    $('.game-square').each(function() {
        $(this).attr('id', 'square' + i);
        i++;
        //add an on click event handler to every game square

        //onclick functions
        $(this).on('click', function() {
            var divToFill = checkEmpty(this);
            addDisc(divToFill);
        })
    })
})

以下是codepen http://codepen.io/Gobias___/pen/xOwNOd

的链接

如果您单击其中一个圈子并观看浏览器的控制台,您将看到它返回true超过3000次。我无法弄清楚我做了什么让它做到了。我希望代码在返回empty = true时立即停止。 empty开始出错,因为我只希望代码在没有类.green或.red的div上运行。

我在哪里错了?

3 个答案:

答案 0 :(得分:8)

  

for(var i = idnum; i&gt; 0; i - 7);

您不会更改i

你想减少7吗?

for循环更改为如下所示:

for (var i = idnum; i > 0; i -= 7) {
  // ...
}

您也不在循环体中使用循环变量。相反,你使用idnum,我认为这可能是个问题。

while (empty == false) {
    for (var i = idnum; i > 0; i -= 7) {
        idnumStr = i.toString(); // changed to i
        var checking = $('#square' + idnumStr);
        var str = checking.attr('class');
        empty = str.includes('empty');
        console.log(empty);
        var divToFill = checking;
        // and don't forget to stop, when found empty
        if (empty) break;
    }
}

我添加break如果找到空,因为如果我们进入下一次迭代,我们将覆盖具有最小i相关值的空变量。

您还可以使用empty包裹if (!empty) {empty = ...;}作业以防止此覆盖,但我认为您可以暂停,因为:

  

我希望代码在返回empty = true

后立即停止

Offtop提示:

while (idnum < 43) {
    idnum = idnum + 7;
}

可以很容易地替换为:idnum = 42 + (idnum%7 || 7)

答案 1 :(得分:4)

更改为:

for (var i = idnum; i > 0; i = i - 7) {

你没有在for循环中递减i

答案 2 :(得分:1)

基于其他人发布的内容你想要在for循环中更改empty的值。因为很明显,字符串仍会检查循环中的最后一个字符串,该字符串总是返回false。

while(empty==false){

for (var i = idnum; i > 0; i -= 7) {
   // your other codes
  if (!empty) {
   empty = str.includes('empty');
   }
}