Javascript数组不反映推送项目

时间:2017-09-07 15:31:16

标签: javascript arrays

我正在尝试更新队列中的位置,然后添加到队列的顶部。如果我背靠背调用两个更新,则通过队列数组的循环不会反映新添加的项目。

队列是具有位置属性的对象数组:

[
 {
   position: 0,
   el:  'stuff'
 },
 {
   position: 1,
   el:  'stuff'
 },
]

队列是类中的属性。以下是我使用的两种方法。一个用于递增队列,然后一个用于添加队列。

  addToQueue(el){
    this.incrementQueue().push({position:0, el:el});
    console.log(this.queue)
  }

  incrementQueue(){
    for(var i = 0; i < this.queue.length; i++){

      this.queue[i].position++;
      if(this.queue[i].position >= this.getMax()){
        this.queue.splice(i,1);
      }
    }

    return this.queue;
  }

全班都在这里:

// Code goes here

class PassActive{
  constructor(options){
    this.options = options || (function(){console.warn('You need to pass in an options object'); return {};})();
    this.passers = this.options.passers || console.warn('You have not specified any elements to pass active between');
    this.max = this.options.max || 1;
    this.min = this.options.min || 0;
    this.removable = this.options.removable? true : false;
    this.queue = this.createQueue();



  }

  getMin(){
    return this.min;
  }

  getMax(){
    return this.max;
  }

  createQueue(){
    var obj = [];
    for (var i = 0; i < this.getMax(); i++) {
      obj[i] = {
        position: i,
        el: null
      };
    }

    return obj;
  }

  isQueueFull(){
    var total = 0;

    this.queue.forEach(function(cv, ci, arr){
      if(cv.el){
        total++;
      } 
    });

    if(total >= this.max){
      return true;
    } else {
      return false;
    }
  }

  addToQueue(el){
    this.incrementQueue().push({position:0, el:el});
    console.log(this.queue)
  }

  incrementQueue(){
    for(var i = 0; i < this.queue.length; i++){

      this.queue[i].position++;
      if(this.queue[i].position >= this.getMax()){
        this.queue.splice(i,1);
      }
    }

    return this.queue;
  }

  setActive(el){
    if(el.classList.contains('active')){
      if(this.removable) {
        el.classList.remove('active');
      } else {
        return;
      }
    } else {
      el.classList.add('active');
    }
  }

}

var ops = {
  passers:   [
              document.getElementById('0'),
              document.getElementById('1'),
              document.getElementById('2'),
              document.getElementById('3'),
              document.getElementById('4'),
              document.getElementById('5')
              ],
  max: 3,
  min: 1,
  removable: false
};



var t = new PassActive(ops);
console.log(t);


t.addToQueue('Tom');
t.addToQueue('Maureen');

有一个plnkr here

array.push方法是否异步?我可能在这里遗漏了一些简单的东西。

由于

1 个答案:

答案 0 :(得分:3)

问题是循环中的splice调用。让我们说索引4的项目,你拼接,这意味着你的旧项目@ 5现在是@ ​​index 4.但是你的循环计数器在4之后跳到5,所以你现在不能检查项目索引4(以前5)。您可以在if语句中执行i--