Question

我想用我的网页更新我的价格我现在有什么：

$(document).ready(function() {
        $("#table1").fadeIn(1000, function myLoop()
        {
        var price = 60;

        for ( var i = 0; i <= price; i++ ) {
                $("#price").html("€" + i);              
            }
        });     
    });

我的For循环需要延迟，因此您可以看到价格向上迭代任何帮助都表示赞赏！

Answer 1

function increasePrice(i, max) {
    setTimeout(function () {
        $("#price").html("€" + i);
        i++;
        if (i <= max) {
            increasePrice(i, max);
        }
    }, 20);
}

increasePrice(0, 200);

这将每20毫秒迭代一次。

演示：http://jsfiddle.net/robschmuecker/78cWu/

Answer 2

在Web编程等面向事件的环境中，您不会在代码中加入延迟;相反，你回到环境中并要求它在一段时间内给你回电。

在浏览器中，您可以使用setTimeout（一次性）或setInterval（针对正在进行的重复计时器）执行此操作。对于你正在做的事情，我会使用setTimeout并根据需要安排每次新的迭代。

以下是一个例子：

$(document).ready(function() {
    $("#table1").fadeIn(1000, function myLoop()
    {
        var price = 60;
        var i = 0;

        loop();

        function loop()
        {
            $("#price").html("€" + i);              
            if (i < price) {
                ++i;
                setTimeout(loop, 100); // 100ms = 1/10th second
            }
        }
    });     
});

在那里，我们从i开始0并致电loop，这会更新价格，然后，如果i小于price，则会询问浏览器在100毫秒（十分之一秒）内再次回拨它。当发生这种情况时，它会显示更新的i值，然后重复该过程，直到i不再小于price。

这是有效的，因为loop是一个闭包而不是i和price，这意味着它对这些变量有持久的引用，即使在{{{ 1}}回调已经返回（它在第一次fadeIn运行后执行）。关于闭包的更多信息（在我的博客上）：Closures are not complicated

Answer 3

我会这样写，setInterval：

function Start() {

    setInterval(SetPrice, 500);
}

function SetPrice() {

    var ThePrice = $('#ThePrice').text();

    ThePrice = (ThePrice.length) ? parseInt(ThePrice, 10) : 0;

    ThePrice = ThePrice + 1;

    $('#ThePrice').hide()
        .text(ThePrice)
        .fadeIn(300);

    if (ThePrice === 60) { 

        clearInterval(SetPrice); 
    }
}

$(Start);

这里是 jsFiddle

这可能会更加严峻，但为了清晰起见，我就这样离开了。

Answer 4

<html>
    <head>
        <title>Price</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </head>
    <body>
<script>
    $(document).ready(function() {
        $("#table1").fadeIn(1000, function myLoop() {
            var price = 60,
                i = 0,
                priceTag = $('#price'),
                inter = setInterval(function () {
                    if (++i >= price) {
                        clearInterval(inter);
                    }
                    priceTag.html("€" + i);
                }, 200);
        })
    });
</script>
<div id="table1">
    <div id="price">10</div>
</div>
    </body>
</html>

延迟for循环中的更新值

4 个答案: