【问题标题】:Pausing during a loop in JavaScript在 JavaScript 循环期间暂停
【发布时间】:2014-04-05 03:46:36
【问题描述】:

我想知道如何让这个 if 循环每秒暂停一次,然后继续计算我拥有的“糖果”数量。

编辑:我想暂停一下,以便我拥有的糖果数量每秒增加 1。目前显示器开始显示 1 到 10。我正在尝试复制此处完成的效果(我对JavaScript):http://candies.aniwey.net/

//booleans
var count = new Boolean;
count = true;
//integers
var candy = 0;

//strings
var txt = "You have ";
var txt1 = " candies.";
var br = "<br>";


//loops
while (candy <= 10) {
    if (candy == 0) {
        document.write(txt + candy + txt1);
        document.write(br);
        candy++;
    } else if (candy == 1) {
        document.write(txt + candy + " candy.");
        document.write(br);
        candy++;
    } else {
        document.write(txt + candy + txt1);
        document.write(br);
        candy++;
    }
}

【问题讨论】:

  • 你看过使用setInterval吗?
  • 为什么要暂停?

标签: javascript if-statement while-loop


【解决方案1】:

使用setTimeout调用函数(jsfiddle

var candy = 0;
function moreCandy() {
    document.getElementById('textHere').innerHTML += 'You have ' + candy + 
        (candy == 1 ? ' candy' : ' candies') + '<br />';
    candy++;
    if (candy <= 10) {
        setTimeout(moreCandy, 1000);
    }
}
moreCandy();

alternatively

for (var i = 0; i <= 10; i++) {
    setTimeout(getCandy(i), i * 1000);
}

function getCandy(amount) {
    return function () {
        document.getElementById('textHere').innerHTML += 
            'You have ' + amount + 
            (amount == 1 ? ' candy' : ' candies') + '<br />';
    };
}

【讨论】:

    【解决方案2】:

    无法暂停 JavaScript 执行。您需要重构此代码以改为基于计时器调用函数。

    顺便说一句 - 永远不要永远不要使用 document.write。使用 DOM 方法,例如 .innerHTML。

    【讨论】:

    • 感谢您的帮助。您能否为我指明如何正确使用 DOM 方法的指南?
    【解决方案3】:

    window.setInterval()代替循环:

    var candy = 0;
    window.setInterval(function() {
      document.write("You have " + ++candy + " candy.<br/>");
    }, 1000);
    

    【讨论】:

    • 这似乎不起作用。它不会增加 1,只是显示我的文本。
    • 啊!忽略这一点,我明白现在发生了什么。希望我应该能够实现这一点!
    猜你喜欢
    • 1970-01-01
    • 2012-01-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多