I have a checkbox with a change event. When there is many data, the click on the checkbox does some background task which can take some time.

So the first thing I do is:

$chxSelectAll.on('change', function (e) {
            $('.loadingnew').show()
            ... Long running code here
}

The problem is: The waiting spinner is only shown, when the change event completed the code. The code works outside or from console without problem. How can I force the show() before the code is running?

Best regards

CodePudding user response：

The waiting spinner is only shown, when the change event completed the code.

That means that the long-running task isn't in the background, it's in the foreground, tying up (blocking) the thread that's shared by the JavaScript code and the page display code.

You have two choices:

1. If possible, offload the long-running task to a web worker thread, so it's not running on the main UI thread, blocking page updates.

2. If that isn't possible, delay the start of the blocking code for about 60ms using setTimeout, so the browser has a chance to show the "loading" spinner before the code holds up the thread. Beware that the spinner may well not actually spin, but it will at least be visible.

Here's an example of #2:

$chxSelectAll.on('change', function (e) {
    $('.loadingnew').show()
    setTimeout(() => {
        ... Long running code here
    }, 60);
});