Take the 2-minute tour ×

For a simple project, I'm trying to display log output in a textarea. I have a log function, and would like the textarea to always be updated immediately whenever log is called. Unfortunately, it seems to only do the update once, and push everything at the same time (I'm using JQuery to set the value of the textarea, if that possibly matters). Here's a basic example:

    $("textarea").html($("textarea").html() + "test" + i + "\n");

This spits out all the text into the textarea at once (note: you can see the results of these examples at this jsfiddle). This basic example is easily remedied by creating a timeout and using recursive function calls:

f = function(i) {
    if (i <= 100) {
        setTimeout(function() { f(i+1); }, 0);


This version spits out the text into the textarea one line at a time, which is what I want. But using timeouts and callbacks in this manner does not seem practical in the setting of logging; every time I call log, I would have to provide a callback for all the functionality that I want to ever follow the log call.

Is there any way to achieve the desired effect without callbacks?

share|improve this question
Well, your first snippet is just so fast that it seems it adds the text at once... –  Felix Kling Apr 24 '11 at 20:46
What exactly are you trying to accomplish? The faster the computer, the less the effect will be observable anyway. I don't quite see why you'd like all the extra redrawing. –  pimvdb Apr 24 '11 at 20:48
Guys I think he want to be able to "see" all the message that comes one by one (so he can see what happend in order) .. for that he has to buffer the logged message and print the periodicaly .. see my answer –  dwarfy Apr 24 '11 at 21:08
Note that since you use a timeout, the call isn't actually recursive. :) –  Lightness Races in Orbit Apr 24 '11 at 21:17
@Felix: In the first snippet, it doesn't add them all at once because it's fast; you can see if you run the second snippet that actually displaying one line at a time looks different. @pimvdb: The application is a sudoku solver, which computes the list of steps needed to take to solve the sudoku, and then animates the list of steps later. But I'd like to log what's going on in the solver as it's computing. Also, if the solver ever crashes, then nothing gets output to the textarea, which is definitely a problem. @dwarfy: thanks, that looks like an awesome solution. –  rubergly Apr 24 '11 at 21:24

2 Answers 2

up vote 1 down vote accepted

I think you might consider using :

$("textarea").val(function(index, value) {
   return value + "test" + i + "\n"

instead of :


or in general :


Also noted in the comments of your question, if you want to be able to notice "by eye" all the messages that arrives you'll have to save them in a buffer and have something like (not tested) :

var buffer = []

function log(text) { buffer.push(text) }

  if (len(buffer)>0) {
      return value + "\n" + buffer.shift()
share|improve this answer

Browsers generally (Opera is an exception) do JS execution and rendering on the same thread, so while your JS is running there will be no rendering done by th browser, unless you explicitly yield control via a timeout or interval timer.

share|improve this answer

Your Answer


