时间分片 Demo

time-slicing.js

// https://juejin.im/post/5d33fd0f5188256e820c80d4

function isFunction(func) {
  return typeof func === 'function';
}

function isArray(arr) {
  return Array.isArray(arr);
}

function init({ sliceList, callback }) {
  if (!isFunction(callback)) {
    console.error('callback 为必传参数并为 function');
		return;
  }

  // 添加切片队列
  this.generator = this.sliceQueue({
    sliceList,
    callback
  });

  // 开始切片
  this.next();
}

function* sliceQueue({ sliceList, callback }) {
	let listOrNum = (isNum(sliceList) && sliceList) || (isArray(sliceList) && sliceList.length);
	for (let i = 0; i < listOrNum; ++i) {
		const start = performance.now();
		callback(i);
		while (performance.now() - start < 16.7) {
			yield;
		}
	}
}

function next() {
	const { generator } = this;
	const start = performance.now();
	let res = null;
	do {
		res = generator.next();
	}
	while (!res.done && performance.now() - start < 16.7);
	if (res.done) return;
	raf(this.next.bind(this));
}