Javascript 数组不反射(reflect)推送的项目

Question

我正在尝试更新队列中的位置，然后添加到队列顶部。如果我连续调用两个更新，则通过队列数组运行的循环不会反射(reflect)新添加的项目。

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

[
 {
   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 方法是异步的吗？我可能在这里遗漏了一些简单的东西。

谢谢

Answer 1

问题是循环中的splice 调用。假设对于索引为 4 的项目，您将其拼接，这意味着您的旧项目 @ 5 现在是 @ 索引 4。但是您的循环计数器在 4 之后跳转到 5，因此您不会检查现在索引 4 处的项目(之前为 5) )。你可以在 if 语句中执行 i--