Question

我之前看到过这个问题，但我所尝试的所有建议以及我自己的一些实验都失败了。

如果我使用Javascript运行以下代码，textarea将仅显示i（5）的最后一个值。如果我使用已注释掉的警报，那么它可以正常工作。

我已经尝试过使用超时，invterval，日期和时间延迟甚至循环来延迟处理但是没有工作，除非我在未注释时使用下面代码中使用的警报。我知道一些延迟仍然允许处理继续。我还尝试将变量传递给其他函数以显示在textarea中，因为看起来textarea在退出函数后显示最后一个值。

如何建议我如何在每次迭代时让textarea更新，以便一次显示一个数字1到5？

我很好奇为什么当其他暂停操作的方法不会发出警报时。

感谢。

function Go(){
  var i = 0;
  for(i=0; i<6; i++){
    alert("This allows textarea to update with each iteration");
    document.getElementById("ta").value = "";
    document.getElementById("ta").value = i;
  }
}

<textarea id="ta" name="display" rows="15" cols="50"></textarea>
<br /><INPUT TYPE="button" VALUE="START" onClick="Go()">

Answer 1

这是另一个使用递归的可能示例：

function Go(counter){    
    if (counter > 5){
       return;
    } else {
       document.getElementById("ta").value = counter;
       window.setTimeout(function(){ Go(++counter) }, 500);
    }
};

Go(1);

如果您刚刚将函数作为回调函数传递给计时器，则计时器将等待指定的持续时间，然后执行该函数 - 该函数贯穿所有迭代，两者之间没有任何延迟。您必须在函数调用（或迭代）之间等待才能看到数字增加。希望有所帮助：）

Answer 2

以下是使用范围和setTimeout

的示例

function Go(){
    var i = 0,
        fn = function () {
            if (i >= 6) return;
            document.getElementById("ta").value = i;
            ++i;
            window.setTimeout(fn, 500);
        };
    fn();
}

Answer 3

其他一些方法实际上产生了后台线程，因此前向进程可以继续不变。您需要一些暂停运行的东西，直到指定的时间结束，或者作为事件驱动机制运行。

window.setTimeout()非常适合这一点。我使用jquery来定位对象，并等待我的示例中的domready。你没有义务这样做，我发现它更容易。 Fiddle here.

$(function() {
    var iterations = 6;

    var burndown = function() {
        var value = $("#fooinput").val() - 1;
        $("#fooinput").val(value);
        if( value > 0) {
            window.setTimeout(burndown,1000);
        } else {
            $("#clickme").removeAttr("disabled");
        }
    }

    $("#clickme").click(function() {
        $("#clickme").attr("disabled","true");
        $("#fooinput").val(iterations);
        window.setTimeout(burndown,1000);
    });
});

Answer 4

如果您想一次显示一个数字，请使用简单的间隔功能，然后在完成后清除它：

var interval = setInterval(function() {
    var textArea = document.getElementById("ta");
    var currentVal = textArea.value || -1;

    currentVal == 5 ? clearInterval(interval) : textArea.value = ++currentVal;
}, 2000);

您的onClick：onClick="interval">

演示：http://jsfiddle.net/at4aX/

Answer 5

Thanks for all your answers. I should have checked in earlier.  Spent all day on this.
I'm new at Javascript and did come up with something that works on my own but it ain't
pretty. I want to learn to use Javascript correctly so I'll look over your  
responses and compare. Seems I should be able to consolidate the functions I came up 
with below or just learn from your suggestions posted here.  I guess I should become 
familiar with jquery, Ajax, etc. as I saw that used a lot in my searching for an 
answer.

<body>
<textarea id="ta" name="testinput" rows="15" cols="50"></textarea>
</body>

<script language="javascript" type="text/javascript">

var i = 0;
document.getElementById('ta').innerHTML = i;
setTimeout(Test1, 3000); 

function Test1(){

  i++;
  document.getElementById('ta').innerHTML = i;
  if(i<4){ //TEXTAREA WILL STOP AT 5
    setTimeout(Test2, 3000);
  }
}

function Test2(){

  i++;
  document.getElementById('ta').innerHTML = i;
  setTimeout(Test1, 3000); 
}

</script>

更新textarea

5 个答案: