javascript - 更新文本区域

Question

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

如果我使用 Javascript 运行以下代码，则 textarea 将仅显示 i (5) 的最后一个值。如果我使用被注释掉的警报，那么它就可以工作。

我尝试过使用超时、间隔、日期和时间延迟，甚至循环来延迟处理，但除非我在未注释掉时使用下面代码中使用的警报，否则没有任何效果。我知道一些延迟仍然允许处理继续。我还尝试将变量传递给其他函数以从那里显示在 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()">

score 1 · Accepted Answer

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

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

Go(1);

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

score 0 · Accepted Answer

这是一个使用范围和setTimeout

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

score 0 · Accepted Answer

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>

score 0 · Accepted Answer

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

window.setTimeout()非常适合这个。我使用 jquery 来定位对象，并在我的示例中等待 domready。你没有义务这样做，我只是觉得它更容易。在这里拉小提琴。

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

score 0 · Accepted Answer

如果要一次显示一个数字，请使用简单的间隔函数，然后在完成后将其清除：

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

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

还有你的点击：onClick="interval">

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

javascript - 更新文本区域

5 回答 5

Related

Reference