Javascript 延迟显示数据时的循环过程

我希望延迟for循环过程，以便数据的加载看起来像一个进度条。 在这段代码中，当我单击按钮时，它将直接显示以下数据：20/20条记录呈现。 我希望看到记录以1/20记录开始呈现，然后在3秒后它将变成2/20记录呈现，依此类推

代码如下：

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

---

谢谢你的帮助。

如果我没有弄错你的意思。。这段代码可以做到这一点

    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将为您服务

谢谢您的帮助。