Home/ Questions/Q 7873261
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T02:27:35+00:00

I’m trying to create a simple display of progress for the user while actions

  • 0

I’m trying to create a simple display of progress for the user while actions are happening. While doing this I noticed jquery-ui dialog didn’t open until all javascript had finished.

I have created some pseudo code but the example shows the issue:
Working example: http://jsbin.com/isivus

Code

<!DOCTYPE html>
<html>
<head>
    <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <meta charset="utf-8">
    <title>HoL</title>
</head>
<script>
    $(function() {
        $('#dialog').dialog({
            autoOpen: false,
            width: 600,
            modal: true,
            closeOnEscape: false
        });

        $(".ui-dialog-titlebar").hide();
        $("#progressbar").progressbar({
            value: 0
        });

        $('input').click(function() {
            $('#dialog').dialog('open');
            for (i = 0; i < 100000; i++) {
                var span = document.getElementById('span');
                $('span').text(i);
            }
        });
    });
</script>
<body>
        <div id="dialog">
            <span class="dialogText">text</span>
            <div id="progressbar"></div>
        </div>
        <input type="button" value="Click me!" />
        <span id="span"></span>
</body>

The dialog doesn’t open until the loop has finished. Seeing as I want to show the dialog, and update the text while the loop is running this isn’t really working.

I am no javascript expert and have no clue where the issue is coming from, hoping any of you could help

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your loop will block everything (most likely the whole browser) while it’s running.

    Split it into small chunks of maybe 10 or 100 loops and then continue asynchronously (i.e. with a zero-delay setTimeout).

    Here’s some code that might do the job:

    $('input').click(function() {
    $('#dialog').dialog('open');
    var i = 0, elem = $('#span');
    function loop() {
        for(var end = i + 100; i < end; i++) {
            elem.text(i);
        }
        if(i < 100000) {
            window.setTimeout(loop, 0);
        }
    }
    loop();
});

    Demo: http://jsfiddle.net/ThiefMaster/fKqQg/3/

    • 0