Infinite Queue

A little demo of an infinitely long-living queue with 6 parallel slots for tasks. The sentinel task that never invokes the callback prevents the queue from ending, even if there are not any currently-active tasks.

There is a downside to this approach, however, which is that the queue’s internal task results array increases in length by one with each task, even though in this case the queue’s results are never triggered. Thus, be careful using this pattern if you really expect the queue to live indefinitely. Alternatively, it might be worth extending Queue’s minimal API to allow tasks to be processed without tracking their return value.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  padding: 40px;
}

div {
  background: steelblue;
  font-family: sans-serif;
  color: white;
  padding: 4px;
  margin-bottom: 2px;
  text-shadow: 0 1px 0 #000;
  overflow: hidden;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script>

var count = 0,
    duration = d3.random.normal(5000, 500),
    parallelism = 6;

var q = queue(parallelism + 1);

q.defer(function sentinel() {}); // run forever

d3.range(10).forEach(repeat); // a few initial tasks

function repeat() {
  q.defer(function(callback) {
    d3.select("body").append("div")
        .style("width", "0px")
        .text(++count)
      .transition()
        .duration(duration())
        .style("width", "480px")
      .transition()
        .duration(250)
        .style("margin-top", function() { return -this.clientHeight + "px"; })
        .style("opacity", 0)
        .each("end", function() { callback(null); })
        .remove();

setTimeout(repeat, duration());
  });
}

</script>

https://d3js.org/d3.v3.min.js

https://d3js.org/queue.v1.min.js