CODEWITHSUNDEEP
javascripthtmljquerysvg
Lis
Lis

Reputation: 624

Javascript execution blocking SVG animation

I'm facing following issue. HTML:

<div id='loading'>
    <svg> /* inline SVG with animateTransform tags */ </svg>
    <span>Loading, please wait...</span>
</div>
<button id='generateResult'></button>
<span id='result'></span>

JS:

$('#generateResult').click(function(){

    $('#loading').fadeIn(100, function(){

        // After showing the 'loading' container, run the calculate_result function
        let result = calculate_result();
        // When it's done, output the result into #result span
        $('#result').html(result);

    });
});

Note: This is not actual code, just a shortcut example.

The problem is that executing the calculate_result function takes about 10 seconds. During that time the #loading container should be visible, which contains an animated svg loading icon. But for some reason, the calculate_result function causes the SVG icon to stop animating.

Is there any way to prevent that?

Upvotes: 0

Views: 630

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324720

JavaScript is single-threaded. If JS code is running, the browser cannot do anything else, and that includes re-drawing the screen. So, your animation appears to stop.

If you have a long-running JS code, you should put it in a Web Worker so that it can run on a separate thread and "message" the main thread when it's done working. This will allow the browser to continue responding to user interaction and draw the "loading" animation.

Upvotes: 4

Related Questions