Jquery – How to disable queued click events during DOM update?

The thing that must be happening here is that your code blocks the event loop during this whole time.
Browsers do use multiple processes, and while the rendering one will wait for the event-loop to be free, the one responsible for queuing the UI events won’t. So after the event-loop is freed, all the events queued by the UI process will be fired one after the other in a small burst. This can be demonstrated quite easily:

let i = 0;
let blocked = false;
document.querySelector("button").onclick = (evt) => {
  if (blocked) {
    return; // will not work 
  }
  blocked = true; // useless
  i = 0; // reset the counter
  console.log("blocking the event loop for 5s.");
  console.log("click anywhere during this period");
  // let the console message print
  requestAnimationFrame(() => setTimeout(() => {
    // block the event-loop for 5s
    const t1 = performance.now();
    while(performance.now() - t1 < 5000) {}
    console.log("releasing the event loop.");
    blocked = false;
  }));
};
onclick = (evt) => {
  if (blocked) {
    return; // will not work 
  }
  console.log("clicked %s times", ++i);
};

<button>click here</button>

As you can see, the synchronous log "releasing the event loop." appears before the next "clicked 1 times". This is because while the UI process kept working and queued the events, the main process, also responsible for the JS execution was blocked and resumed where it was. So all your attempts to prevent the click from happening were moot because the event callbacks would only be executed after you unlocked the button. For these, it’s as if the button was never blocked.

To avoid that, the best is to not block the event-loop. You don’t really show what you are doing, so it’s hard to tell what you should do exactly, but some common strategies involve:

• Purely arithmetic computation / data transformation (heavy ones), should be moved to a second thread, using a web worker. This allows to keep your main thread and its rendering process working seamlessly. This way you can await nicely that the asynchronous job is done before unlocking your buttons.

• If your visualizations are done on a <canvas>and that the drawing is the culprit, try to improve it, and you can consider using an OffscreenCanvas that you’d also transfer to a web worker.

• If the culprit is due to DOM manipulations, you won’t be able to transfer that to a worker, they don’t have access to the DOM. So instead, make sure that your code doesn’t trigger unnecessary "reflows". This operation forces the CSSOM to recalculate all of the elements’ boxes. Misused it can become a perf’ killer. If you must get computed styles during your DOM manipulations, be sure to batch them all in the same place and to do the changes that would dirty the layout after you’ve had all the getters.

• If you have several visualizations being rendered at the same time, try to render only the ones that would be visible in the screen first, and then wait that a first batch is done before continuing with the other ones. Space each of these in setTimeout() calls, this will give the browser time to render what it has to render, and to process the UI events. Tasks coming from the UI task source usually have the highest priority in the event-loop.

• If you’ve got only one visualization that still takes more than a few hundred ms, you can try to split it’s rendering algorithm and space it in setTimeout() calls.

If none of these solution is applicable to you, the worst solution possible would be to wrap the code that does reenable the button in a setTimeout() callback. To be safe you may pass something like 10ms as the second argument. But really, this is the worst solution.

let i = 0;
let blocked = false;
document.querySelector("button").onclick = (evt) => {
  if (blocked) {
    return; // will now work 
  }
  blocked = true;
  i = 0; // reset the counter
  console.log("blocking the event loop for 5s.");
  console.log("click anywhere during this period");
  // let the console message print
  requestAnimationFrame(() => setTimeout(() => {
    // block the event-loop for 5s
    const t1 = performance.now();
    while(performance.now() - t1 < 5000) {}
    console.log("releasing the event loop.");
    setTimeout(() => blocked = false, 10);
  }));
};
onclick = (evt) => {
  if (blocked) {
    return; // will now work 
  }
  console.log("clicked %s times", ++i);
};

<button>click here</button>