代码之家 › 专栏 › 技术社区 › Jannik

在javascript for循环中睡眠

sleep for-loop loops javascript

Jannik · 技术社区 · 8 年前

我正在尝试创建一个计数器,它每1秒更新一次。我做了一个后端函数,它每30秒返回一次,这是用Ajax调用的。调用的结果除以30,然后每隔1秒更新计数器30秒。我该如何在for循环中进行睡眠?

这是我到目前为止的代码:

function getCount() {
    $.ajax({
        url: '@Url.Action("", "", new {area = ""})',
        type: 'POST',
        success: function (data) {
            var newTotalCount = data.totalCount;
            var newDanishCount = data.danishCount;
            var newNorwayCount = data.norwayCount;
            var newSwedenCount = data.swedenCount;
            var newUsCount = data.usCount;

            var currentTotalCount = $("#odoTotal").text().replace(/,/g, "").replace(/(\r\n|\n|\r)/gm, "");
            var currentDanishCount = $("#odoDk").text().replace(/,/g, "").replace(/(\r\n|\n|\r)/gm, "");
            var currentNorwayCount = $("#odoNo").text().replace(/,/g, "").replace(/(\r\n|\n|\r)/gm, "");
            var currentSwedenCount = $("#odoSe").text().replace(/,/g, "").replace(/(\r\n|\n|\r)/gm, "");
            var currentUsCount = $("#odoUs").text().replace(/,/g, "").replace(/(\r\n|\n|\r)/gm, "");

            var updateTotalCount = newTotalCount - currentTotalCount;
            var updateDanishCount = newDanishCount - currentDanishCount;
            var updateNorwayCount = newNorwayCount - currentNorwayCount;
            var updateSwedenCount = newSwedenCount - currentSwedenCount;
            var updateUsCount = newUsCount - currentUsCount;

            var updateTotalPerSecond = updateTotalCount / 30;
            var updateDanishPerSecond = updateDanishCount / 30;
            var updateNorwayPerSecond = updateNorwayCount / 30;
            var updateSwedenPerSecond = updateSwedenCount / 30;
            var updateUsPerSecond = updateUsCount / 30;


            getAllSales();

            for (var i = 0; i < 30; i++) {
                window.setTimeout(function() {
                    $("#odoTotal").html(currentTotalCount+updateTotalPerSecond);

                    $("#odoDk").html(currentDanishCount+updateDanishPerSecond);

                    $("#odoNo").html(currentNorwayCount+updateNorwayPerSecond);

                    $("#odoSe").html(currentSwedenCount+updateSwedenPerSecond);

                    $("#odoUs").html(currentUsCount+updateUsPerSecond);

                    currentTotalCount = $("#odoTotal").text().replace(/,/g, "").replace(/(\r\n|\n|\r)/gm, "");
                    currentDanishCount = $("#odoDk").text().replace(/,/g, "").replace(/(\r\n|\n|\r)/gm, "");
                    currentNorwayCount = $("#odoNo").text().replace(/,/g, "").replace(/(\r\n|\n|\r)/gm, "");
                    currentSwedenCount = $("#odoSe").text().replace(/,/g, "").replace(/(\r\n|\n|\r)/gm, "");
                    currentUsCount = $("#odoUs").text().replace(/,/g, "").replace(/(\r\n|\n|\r)/gm, "");


                }, 1000);

            }

        }
    });

}

2 回复 | 直到 8 年前

Beginner 8 年前

我有一个解决办法

首先,创建一个要递增的变量

var x = 0;

然后创建一个间隔,该间隔将在时间结束后执行您想要的操作,例如5(s),这也将增加您的值 x 每次它运行

var interval = setInterval(function() {
    if (x >= 5) { // just change 5 to 30
        console.log('Loop timeout ended');
        return clearInterval(interval);
    }
    // do what ever you want
    console.log('Current x: '+x);
    x++;
}, 5000);

示例函数

function runTimeoutLoop(){
    var x = 0;
    var interval = setInterval(function() {
        if (x >= 5) { // just change 5 to 30
            console.log('Loop timeout ended');
            return clearInterval(interval);
        }
        // do what ever you want
        console.log('Current x: '+x);
        x++;
    }, 5000); 

}

Demo

Farshid Shekari 7 年前

如果您使用Firefox 53+,或babel,您可以使用ES2017:

async function promiseTimeout(milliseconds) {
    await new Promise(resolve => setTimeout(()=>resolve(), milliseconds))
}

async function countDown(from) {
    while (from) {
        console.log(from--, 'seconds left');
        await promiseTimeout(1000);
    }
    alert('countdown done');
}

countDown(10);

Here 这是与巴贝尔。