Question

我试图遍历一个元素列表并给它们一个随机颜色。但我不希望他们使用与前一种颜色相同的颜色。

因此我创建了一个for循环，其中调用了一个函数来从数组中获取颜色。如果颜色与之前的颜色匹配，则它不会返回而是再次调用自身以获得另一种颜色。

问题在于，课程经常不会被添加到元素中。似乎for循环不等待它返回并循环到下一个元素，或者我不应该从内部再次调用该函数。我不太确定，如果有人能提供帮助会很棒，这就是我到目前为止所做的：

/**
 *  Return int between min and max
 *  @return number.
 */
function randomIntFromInterval(min, max) {
    return Math.floor(Math.random()*(max-min+1)+min);
};

var app = {

  init: function(){
    var self = this;

    this.colorPool = ['blue', 'orange', 'pink'],
    this.items = document.querySelectorAll('.js-icon'),
    this.oldColor = 'pink',
    this.newColor;

    for (i = 0; i < this.items.length; i++) {
        // Add a Random Color Class.
      self.newColor = self.getColor(self.oldColor);
      self.items[i].classList.add(self.newColor);
    }
  },

  getColor: function() {
      var color = this.colorPool[randomIntFromInterval(0, (this.colorPool.length-1))];
      console.log('n= ',color, ' old= ', this.oldColor);

      if(color === this.oldColor){
           console.log('need to choose another');
           this.getColor();
      } else {
          console.log('return now');
          this.oldColor = color;
          return color;
      }  
  }
}

app.init();

Answer 1

这是您的错误：您需要返回递归值。返回 this.getColor（）;

if(color === this.oldColor){
       console.log('need to choose another');
       return this.getColor();
  } else {
      console.log('return now');
      this.oldColor = color;
      return color;
  }

在您的函数中，只有在第一次找到正确的颜色时才返回它。当您再次以递归方式调用该函数时，它将不再返回颜色。因此，当您使用递归函数时，您需要返回基本案例和调用自身的结果。

从数组中随机选择但在for循环内部无法按预期工作

1 个答案: