正在更新textarea

我以前見過這個問題，但我嘗試過的所有建議以及我自己的一些實驗都失敗了。正在更新textarea

如果我使用Javascript運行下面的代碼，textarea將只顯示我的最後一個值（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()">

來源

2013-07-15 Don Sarvas

我相信他希望它增加，例如， 1，然後2，然後3，而不是全部一次性附加。 –

[像這樣]（http://jsfiddle.net/fmsa7/）？ –

下面是使用範圍和setTimeout

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

來源

2013-07-15 20:02:22

嘿，那是一個封閉！：D –

這個也正是我想要的。謝謝！ –

其中的一些其它方法實際上產卵後臺線程以便向前進程可以繼續有增無減一個例子。您需要一些可以暫停運行直到指定時間到，或者作爲事件驅動機制運行。

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

來源

2013-07-15 20:04:57 PaulProgrammer

如果在問題中未標記jQuery，請使用純JS？ :) – tymeJV

**編輯：**其實，我在jQuery之前就已經寫下了JS，因爲我很難完成跨平臺的純JS工作。（我仍然在與跨平臺CSS鬥爭）我是一個有時需要做前端工作的Java程序員。如果你覺得如此傾向，請隨意編輯我的jQuery。 – PaulProgrammer

我不知道jQuery，但我會堅持這一點，因爲我打算潛入CSS。幾十年前我學會了HTML。很多改變了。謝謝。 –

如果你想一次顯示的號碼一個，使用一個簡單的間隔功能，然後清除它，當你完成：

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/

來源

2013-07-15 20:05:24 tymeJV

正是我想要的。謝謝！ –

這裏是使用遞歸的另一個可能的例子：

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

Go(1);

如果您剛剛將函數作爲回調函數傳遞給定時器，則定時器會等待指定的持續時間，然後執行該函數 - 該函數會在所有迭代之間運行，而不會有任何延遲。您必須在函數調用（或迭代）之間等待才能看到數量增加。希望有幫助:)

來源

2013-07-15 20:08:10 mcbex

PS：警報看起來像是在工作，因爲警報將凍結頁面直到它們被解僱 – mcbex

謝謝。我真的很好奇那件事。我只是把警報放在那裏，以找出事情發生錯誤的地方，只是發現事情一旦我做到了，事情就開始走向正確，不知道爲什麼。 –

那個也做我想要的。我在學！ –

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>

來源

2013-07-16 05:28:19

正在更新textarea

回答

相關問題