javascript - 从数组对象延迟加载数据

Question

我正在尝试弄清楚如何加载数据(延迟加载)。 首先，加载数据，比如说 5 条记录，然后当用户第二次单击按钮时，加载另外 5 条记录，这样就会有 10 条记录，依此类推，直到结束。

Peter Seliger 非常友善地 answer the question我需要另一半，所以我决定创建一个新问题，而不是让他与我原来的问题更加困惑。

const data = [
  {
    "color": "purple",
    "type": "minivan",
    "registration": new Date('2017-01-03'),
    "capacity": 7
  },
  {
    "color": "red",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red2",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red3",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red4",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red5",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red6",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red7",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red8",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red9",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red10",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red11",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red12",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red13",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }, 
  {
    "color": "red14",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  } 
];
data2 = {};

function* createChunkGenerator(
  itemList = [], chunkSize = 1, chunkCount = 0
) {
  chunkSize = Math.max(chunkSize, 1);

  while (itemList.length >= 1) {
    ++chunkCount; 
    yield { chunkCount, itemList: itemList.splice(0, chunkSize),  };
  }
}
let chunkGenerator = createChunkGenerator( data, 5 );
 
console.log('...automatically tiggered `next` based iteration...');  
data2 =  chunkGenerator.next();
console.log( data2 ); 

这是我创建的代码笔: https://codepen.io/threeonethree/pen/YzYgMYL

Answer 1

你到底被困在哪里了？基本上，您只需为按钮注册一个事件处理程序，然后调用 chunkGenerator.next() 直到处理完最后一个元素 block 。

const data = [{
    "color": "purple",
    "type": "minivan",
    "registration": new Date('2017-01-03'),
    "capacity": 7
  },
  {
    "color": "red",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red2",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red3",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red4",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red5",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red6",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red7",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red8",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red9",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red10",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red11",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red12",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red13",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    "color": "red14",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  }
];

function* createChunkGenerator(
  itemList = [], chunkSize = 1, chunkCount = 0
) {
  chunkSize = Math.max(chunkSize, 1);

  while (itemList.length >= 1) {
    ++chunkCount;
    yield {
      chunkCount,
      itemList: itemList.splice(0, chunkSize),
    };
  }
}

const chunkGenerator = createChunkGenerator(data, 5);
const target = document.getElementById('target');
const itemList = [];

document.querySelector('.js-lazy-load').addEventListener('click', function() {
  const chunk = chunkGenerator.next();
  if (!chunk.done) {
    const list = chunk.value.itemList;
    
    // append the new items to the itemList  
    itemList.push.apply(itemList, list);
    console.log(itemList.length + ' items loaded');
    
    // render each item
    list.forEach(function(item) {
      // render the list item here ...
      const itemElement = document.createElement('div');
      itemElement.classList.add('item');
      itemElement.innerText = item.type + ' ' + item.color + ' ' + item.capacity + ' ' + item.registration.toLocaleDateString("en-US");
      target.appendChild(itemElement);
    });
  }
})

.item {  background: #eee; margin: 3px; }
#target { width: 65%;}
.as-console-wrapper { min-height: 100%!important; top: 0; left: auto!important; right: 10px!important; width: 30%; }

<div id="target"></div>

<button type="button" class="btn btn-primary btn-block js-lazy-load">
    next
</button>