window.confirm dialog doesn't let element style changes to finish being applied. Any workaround?

Question

I'm working on a javascript UI which assumes that there are a certain grid elements that need to be looked-at/examined by the user and then a confirmation shall pop up to query user's intentions and carry them out accordingly.

The code goes something like this:

elements.forEach(x => {
    x.style.backgroundColor = "red";
    x.scrollIntoView();
    let r = confirm("Do you wish to alter element?");
    //function code
});

Once the code is executed, window.confirm doesn't wait for the element style changes to complete and for the element itself to be scrolled into view.

Is there a workaround for this behavior of window.confirm?

are you sure the html dom has finished loading before this script is called? — jtylerm, Apr 15 '19 at 17:22
@jtylerm Yes. This whole code runs after DOM has been completely loaded. — Noodles, Apr 15 '19 at 17:24
Just for kicks wrap it inside a setTimeout and set it to 300 and that might get you the behavior you are looking for. — David Najar, Apr 15 '19 at 18:01
Possible duplicate of [Why is setTimeout(fn, 0) sometimes useful?](https://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful) — Conspicuous Compiler, Apr 15 '19 at 19:22

score 0 · Answer 1 · answered Apr 15 '19 at 18:23

You can try to force the confirm() to execute in the next event loop with a timeout

elements.forEach(x => {
    x.style.backgroundColor = "red";
    x.scrollIntoView();
    setTimeout (function () {
        let r = confirm("Do you wish to alter element?");
        //function code
    }, 0)
});

window.confirm dialog doesn't let element style changes to finish being applied. Any workaround?

1 Answers1