I have a vanilla js setup that relies on functions being stored in a config object. The stored functions are then assigned to anchor element .onclick events (used to allow clicking headers in a table, but that's not related to the question). Those functions usually fire an alert, show a confirm dialogue, or prompt the user for a string. i.e:
const cfg = {
f1: (hdr) => { alert (`You clicked on ${hdr}`); }
}
anchorElement.onclick = cfg.f1.bind(null, anchorElement.textContent);
Everything works, but whenever one of these functions waits for a user's response (even just clicking OK on an alert), the browser (Chrome in this case) is firing the '[Violation] 'click' handler took ms' message in the console.
I have searched for this issue and tried the various workarounds for similar issues (involving promises, async, and timeouts), but the message persists as seen here:
Fiddle
I have been through all of the 'similar questions' that pop up as I type this. I get that this is not a code-breaking issue and that the most common suggestion is to just ignore it if you know it's not a long-running process that you need to tweak. But the presence of the message indicates to me that there should be a "right" way to handle a click event when you are expecting it to take an unforeseen-but-definitely-longer-than-50ms amount of time.
So, what IS the proper way to wait on a dialogue box in an onclick function?
