How to use the algorithm-visualizer.Tracer.delay function in algorithm-visualizer

function DFS(node, parent) { // node = current node, parent = previous node
  // visualize {
  tracer.visit(node, parent);
  Tracer.delay();
  // }
  for (let i = 0; i < G[node].length; i++) {
    if (G[node][i]) { // if current node has the i-th node as a child
      DFS(i, node); // recursively call DFS
    }
  }
}

(function main() {
  // visualize {
  Layout.setRoot(new VerticalLayout([array2dTracer, logTracer]));
  array2dTracer.set(messages);
  Tracer.delay();
  // }
  highlight(0);
})();

function update(i, j, value) {
  DP[i][j] = value;
  // visualize {
  dataViewer.select(i, j);
  Tracer.delay();
  tracer.patch(i, j, DP[i][j]);
  Tracer.delay();
  tracer.depatch(i, j);
  dataViewer.deselect(i, j);
  // }
}

function highlight(line) {
  if (line >= messages.length) return;
  const message = messages[line];
  // visualize {
  logTracer.println(message);
  array2dTracer.selectRow(line, 0, message.length - 1);
  Tracer.delay();
  array2dTracer.deselectRow(line, 0, message.length - 1);
  // }
  highlight(line + 1);
}

(function main() {
  // create K buckets
  const buckets = [...new Array(K)].map(() => []);
  // visualize {
  arrayTracer.chart(chartTracer);
  arrayTracer.set(array);
  bucketsTracer.set(buckets);
  Tracer.delay();
  // }

  // find the maximum value that will be used for distribution
  const max = Math.max(...array);

  // distribute the elements into the buckets
  for (let i = 0; i < N; i++) {
    const number = array[i];
    const bucketIndex = Math.floor(number / (max + 1) * K);
    const bucket = buckets[bucketIndex];
    bucket.push(number);
    // visualize {
    arrayTracer.select(i);
    bucketsTracer.patch(bucketIndex, bucket.length - 1, number);
    Tracer.delay();
    bucketsTracer.depatch(bucketIndex, bucket.length - 1);