Multiple code blocks on a page: sometimes a block is filled with content of another block

[ssp297]

There seems to be an issue with multiple code blocks on a page, sometimes the content of a block is replaced by the content of another block. I could even reproduce the problem on the demo-site (see picture below) with Firefox 49.0.1/Windows 10 pro 64bit, after pressing F5-key repeatedly:

I think, the problem can be avoided by sequentializing the render process (my pre-tags have class "snippet"):

var snippets = $("pre.snippet");
    if (snippets.length > 1) {
        Rainbow.defer = true;
        var iNext = 0, rbNext = function () {
            if (iNext < snippets.length) Rainbow.color(snippets.get(iNext++), rbNext);
        };
        rbNext();
    }

[ccampbell]

I thought this might actually be a bug. It had been reported a couple times on the mousetrap documentation page:

ccampbell/mousetrap#347
ccampbell/mousetrap#357

Doing them in a sequence like you suggested probably would fix it, but I think there is something else going on. The only way this can be happening is if the id comes back with the same identifier for multiple code blocks which means Math.random() would be returning the same number:

rainbow/src/rainbow.js

Line 162 in 3374f13

id: String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now(),

The problem is I don't know a way to consistently reproduce this or how it is even possible that multiple blocks are coming back with the same identifier

[ssp297]

If the computer is fast enough, Date.now() can produce same values; I have logged some calls with

    console.log("id: " + String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now());
    console.log("id: " + String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now());

Sometimes I see identical values for Date.now(); the computed random-char has a chance of 1 : 26 to be the same, so there is a real chance for identical IDs;
You could get safe IDs, if you put a global counter somewhere (eg. as attribute at the body-tag) and build IDs like "rainbow-id-2".

Could the issue be related to your cachedWorker? When I suppress caching (creating a new worker for every call), I can't reproduce the error.

[ccampbell]

Interesting. Yeah I think the counter is probably the simplest approach.

I don't think the cachedWorker is the issue cause this data is passed in as a message to the worker. I am trying to think why using a separate worker for each one would get rid of the error. My best guess is that the extra overhead means that Date.now() is less likely to be the same

[ccampbell]

It's definitely just random. On a fast enough computer, it has a 1/26 chance of re-using the same id assuming all the blocks are looped over in the same millisecond

[ssp297]

Yes, it's the random, I logged the created ID now; when the error occurs, the ID is actually the same.

[xhs345]

Can confirm same issue with Firefox 50.0.2/Windows 10 pro 64bit

[ssp297]

You may consider to patch that issue with something like:
const workerData = { id: "rainbow-uid-" + (++Rainbow.rbUniqueId), ...
and add property "rbUniqueId: 0" to your global Rainbow-definition.