Manage long-running tasks without losing interactivity

Long-running tasks in JavaScript can block the event loop. If another, higher-priority task needs to run in the meantime, it will have to wait until the current task is finished.

One solution for this is to break the long-running task into chunks. Then, each chunk can be run in a setTimeout callback. If a higher-priority task comes up, it will be able to run in between the chunks.

chunked-queue manages the list of chunks for you. You can even give it multiple lists of chunks, and set (and update) priorities for each list, to make sure the most urgent task finishes first.

Instead of setTimeout, chunked-queue uses zero-timeout, to avoid the minimum delay between setTimeout callbacks.

chunked-queue is provided as an ESM import.

import * as chunkedQueue from 'chunked-queue';

To initialize a new queue, call the init method, with no parameters:

const queue = chunkedQueue.init();

The initialized queue object exposes four methods

const taskId = queue.enqueueTask(newTask);

The supplied newTask object may have the following properties:

• newTask.chunks (REQUIRED): An array of zero-argument functions, in the order in which they are to be called. NOTE: These are assumed to be synchronous
• newTask.getPriority (OPTIONAL): A method that when called, returns a priority number for this task. Lower priority numbers will be run first. If not supplied, this task will be given a constant priority of 0.

The return value is an integer ID, which can later be used to cancel the task.

queue.cancelTask(taskId);

Cancels the task represented by the supplied taskId.

queue.sortTasks();

Sorts the tasks in the queue, according to the values returned by the .getPriority() method on each task.

This lets you re-set the priorities of the tasks after they are queued. Simply update the .getPriority methods to return smaller values for the tasks which have become more urgent.

numTasks = queue.countTasks();

Returns the number of tasks in the queue