jQuery: Text not updating inside recursive function

Question

I'm new to jQuery, and I have been playing around with it a bit. I have one UI element called result, which is updated once the result arrives and this works perfectly. However, this result comes from a series of computations.
Now I want the UI element to update after each computation to show some sort of progress. However, if I set the value of the UI element inside this recursive function I'm using for computation, it doesn't update it. Here's the code:

function getRes(val) {
  if(val === finalVal)
    return;
  // do something 
  $("#result").text(someVal); //This doesn't work
  getRes(val+1);
}

$("#resbtn").on('click', function(){
  getRes(0);
  $("#result").text(res);  //This works
});

Why is this happening?

You need to trick the browser into refreshing the DOM. See [Why is setTimeout(fn, 0) sometimes useful?](http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful) — plarner7, Jan 26 '17 at 12:12
There is no variable called "someVal". You should use "val"... $("#result").text(val); — Maciej Kasprzak, Jan 26 '17 at 12:13
Why you don't post a complete example (with HTML elements and missing JS variables)? — Ala Eddine JEBALI, Jan 26 '17 at 12:15
@AlaEddineJEBALI I couldn't post the whole code because it's part of a project that I cannot share. :/ — Zeokav, Jan 26 '17 at 13:02

score 0 · Answer 1 · edited May 23 '17 at 12:09

You need to trick the browser into refreshing the DOM. See Why is setTimeout(fn, 0) sometimes useful?

function getRes(val) {
    if(val === finalVal)
    return;
    // do something

    setTimeout(function() {
        $("#result").text(someVal); //This doesn't work
        getRes(val+1);
    }, 0);
}

$("#resbtn").on('click', function(){
    getRes(0);
    $("#result").text(res);  //This works
});

score 0 · Answer 2 · answered Jan 26 '17 at 13:43

Your code works fine. I logged into another div each pass into your recursive function :

var finalVal = 100;
var someVal;

function resetLogs() {
  $("#log").html('<h3>Logs</h3>');
}

function getRes(val) {
  if(val === finalVal)
    return;
  // do something 
  someVal = "Loading : "+val+'%';
  $("#log").append(someVal+'<br>');
  $("#result").text(someVal);
  getRes(val+1);
}

$("#resbtn").on('click', function(){
  resetLogs()
  getRes(0);
  $("#result").text("FINAL");
});

$("#resbtn2").on('click', function(){
  resetLogs()
  getRes(0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">initial content</div>
<button id="resbtn">With 'final'</button> <button id="resbtn2">Without final!</button>

<div id="log">
  <h3>Logs</h3>
</div>

The problem may be that you go trough your recursive function so fast that the displayed data haven't enough time to be properly displayed and is quickly replaced by the final value to display (here "FINAL" string)

jQuery: Text not updating inside recursive function

2 Answers2