延迟显示数据的循环过程

Question

我想延迟 for 循环过程，使数据加载看起来像一个进度条。在这段代码中，当我点击按钮的那一刻，它会直接显示这个数据：20/20 Records Rendered。我希望看到记录以 1/20 Records Rendered 开始，然后在 3 秒后它将变为 2/20 Records Rendered 等等。

代码如下：

<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>

控制器：

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);
    }

谢谢你帮助我。

Answer 1

如果我没看错你的意思..这段代码可以解决问题

    function Run(value) {
        custRecordsRendered = 0;
        $.ajax({
            type: 'Post',
            url: "/Home/RunSample",
            success: function (data) {

                totalRecords = data[0].Total;
                console.log("Total: " + data[0].Total);
                console.log("Records: " + Object.keys(data).length);
                var itemCount = 0;
                var progressInterval = setInterval(function () {
                    if (itemCount < data.length) {
                        console.log(itemCount);
                        console.log("logs: " + data[itemCount].Records);
                        custRecordsRendered = data[itemCount].Records;
                        updateProgress();
                        itemCount++;
                    }
                    else {
                        clearInterval(progressInterval);
                    }
                }, 500);

            }
        });
        function updateProgress() {
            $("#completeCount").text(custRecordsRendered + "/" + totalRecords + " Records Rendered");
        }
    }

在您的代码中，您将 setTimeout 函数视为它会导致线程休眠，但实际上，它所做的并不是设置一个延迟的异步事件，该事件将在指定的时间间隔后触发并执行处理函数，但是在 setTimeout 调用之后的代码的执行将继续..所以 setInterval 将为您服务

延迟显示数据的循环过程

Delay the loop process in displaying the data

javascript

c#

json

object

progress-bar