victorporof/async-stack-tagging-recurring.js

## async-stack-tagging-recurring.js
/* --- Userland --- */

function makeUpdate(i) {
  return function someUpdate() {
    console.trace(`completeUpdate: update ${i}`);
  };
}

function businessLogic() {
  scheduler.scheduleTask("foo", [makeUpdate(1), makeUpdate(2), makeUpdate(3)]);
  scheduler.scheduleTask("bar", [makeUpdate(4), makeUpdate(5)]);
}

businessLogic();
scheduler.scheduleWorkLoop();

## framework.js
/* --- Framework --- */

function makeTask(id, name, updates) {
  return {
    performNextUpdate() {
      console.info(`Performing next update within task '${name}'.`);

      const f = updates.shift();
      console.startAsyncTask(id);
      f();
      console.finishAsyncTask(id);

      if (updates.length) {
        console.info(`Task '${name}' has ${updates.length} updates remaining.`);
        return false;
      }

      console.info(`Task '${name}' finished, no updates remaining here.`);
      console.cancelAsyncTask(id);
      return true;
    },
  };
}

function makeScheduler() {
  const tasks = [];

  function workLoop(deadline) {
    console.info(`Started new work loop.`);

    while (deadline.ticksRemaining() > 0 && tasks.length) {
      const task = tasks[0];
      const finished = task.performNextUpdate();
      if (finished) {
        tasks.shift();
      }
    }

    if (tasks.length) {
      console.warn("Exceeded deadline but not finished, yielding.");
      fakeRequestIdleCallback(workLoop);
      return;
    }

    console.info("Work loop finished, no tasks remaining here.");
  }

  return {
    scheduleTask(name, updates) {
      const id = console.scheduleAsyncTask(name, true);
      tasks.push(makeTask(id, name, updates));
      console.info(`Scheduld task '${name}' with ${updates.length} updates.`);
    },

    scheduleWorkLoop() {
      fakeRequestIdleCallback(workLoop);
    },
  };
}

const scheduler = makeScheduler();

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Async Tasks API</title>
  </head>
  <body>
    <script src="runtime.js"></script>
    <script src="framework.js"></script>
    <script src="async-stack-tagging-recurring.js"></script>
  </body>
</html>

## runtime.js
/* --- Runtime --- */

// Something akin to requestIdleCallback, but deterministic.

const BUDGET = 2;

function fakeRequestIdleCallback(cb) {
  function makeDeadline() {
    let ticks = BUDGET;

    return {
      ticksRemaining() {
        return ticks--;
      },
    };
  }

  setTimeout(cb, 1000, makeDeadline());
}
	/* --- Userland --- */

	function makeUpdate(i) {
	return function someUpdate() {
	console.trace(`completeUpdate: update ${i}`);
	};
	}

	function businessLogic() {
	scheduler.scheduleTask("foo", [makeUpdate(1), makeUpdate(2), makeUpdate(3)]);
	scheduler.scheduleTask("bar", [makeUpdate(4), makeUpdate(5)]);
	}

	businessLogic();
	scheduler.scheduleWorkLoop();
	/* --- Framework --- */

	function makeTask(id, name, updates) {
	return {
	performNextUpdate() {
	console.info(`Performing next update within task '${name}'.`);

	const f = updates.shift();
	console.startAsyncTask(id);
	f();
	console.finishAsyncTask(id);

	if (updates.length) {
	console.info(`Task '${name}' has ${updates.length} updates remaining.`);
	return false;
	}

	console.info(`Task '${name}' finished, no updates remaining here.`);
	console.cancelAsyncTask(id);
	return true;
	},
	};
	}

	function makeScheduler() {
	const tasks = [];

	function workLoop(deadline) {
	console.info(`Started new work loop.`);

	while (deadline.ticksRemaining() > 0 && tasks.length) {
	const task = tasks[0];
	const finished = task.performNextUpdate();
	if (finished) {
	tasks.shift();
	}
	}

	if (tasks.length) {
	console.warn("Exceeded deadline but not finished, yielding.");
	fakeRequestIdleCallback(workLoop);
	return;
	}

	console.info("Work loop finished, no tasks remaining here.");
	}

	return {
	scheduleTask(name, updates) {
	const id = console.scheduleAsyncTask(name, true);
	tasks.push(makeTask(id, name, updates));
	console.info(`Scheduld task '${name}' with ${updates.length} updates.`);
	},

	scheduleWorkLoop() {
	fakeRequestIdleCallback(workLoop);
	},
	};
	}

	const scheduler = makeScheduler();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Async Tasks API</title>
	</head>
	<body>
	<script src="runtime.js"></script>
	<script src="framework.js"></script>
	<script src="async-stack-tagging-recurring.js"></script>
	</body>
	</html>
	/* --- Runtime --- */

	// Something akin to requestIdleCallback, but deterministic.

	const BUDGET = 2;

	function fakeRequestIdleCallback(cb) {
	function makeDeadline() {
	let ticks = BUDGET;

	return {
	ticksRemaining() {
	return ticks--;
	},
	};
	}

	setTimeout(cb, 1000, makeDeadline());
	}