Question

我是jQuery的新手，我一直在玩它。我有一个名为result的UI元素，一旦结果到达就会更新，这样就完美了。但是，这个结果来自一系列的计算。
现在我希望UI元素在每次计算后更新以显示某种进度。但是，如果我在我用于计算的递归函数中设置UI元素的值，它不会更新它。这是代码：

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

为什么会这样？

Answer 1

您需要欺骗浏览器刷新DOM。见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
});

Answer 2

您的代码运行正常。我登录到另一个div，每次传入你的递归函数：

＆＃13;

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

＆＃13;

<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>

＆＃13;

问题可能是您通过递归功能如此之快，以至于显示的数据没有足够的时间正确显示，并且很快被最终值替换以显示（此处＆＃34;最终＆＃34; 字符串）

jQuery：文本没有在递归函数内部更新

2 个答案: