Delay the loop process in displaying the data

Vote count: 0

I would like to delay the for loop process so that the loading of data looks like a progress bar. In this code, the moment i click the button, it will directly display this data: 20/20 Records Rendered. I would like to see the record start with 1/20 Records Rendered then after 3 seconds it will become 2/20 Records Rendered and so on.

Here is the code:

<button name="subject" type="submit" value="6" onClick="Run(this.value)">Run</button>
<script>
        function Run(value) {
            custRecordsRendered = 0;
            $.ajax({
                type: 'Post',
                url: "/Tasks/RunSample",
                success: function (data) {
                    totalRecords = data[0].Total;
                    console.log("Total: " + data[0].Total);
                    console.log("Records: " + Object.keys(data).length);
                    for (var key in data) {
                        (function iterator() {
                            console.log("logs: "+data[key].Records);
                            setTimeout(iterator, 3000);
                        })();

                        if (data.hasOwnProperty(key)) {
                            custRecordsRendered = data[key].Records;
                            updateProgress();
                        }
                    }                    
                }
            }); 
            function updateProgress() {
                $("#completeCount").text(custRecordsRendered + "/" + totalRecords + " Records Rendered");
            }
        }
    </script>

Controller:

public JsonResult RunSample()
    {
        List<object> countData = new List<object>();

        int count = 20;
        for (int i = 1; i <= count; i++)
        {
            countData.Add(new { Total = count, Records = i });

        }
        return Json(countData);
    }

Thank you for helping me.

asked 22 secs ago

Jen143

Let's block ads! (Why?)

Delay the loop process in displaying the data