Question

我正在尝试使用递归函数在JavaScript中打印1到10，我当前的代码是：

function rec10(x)
 {

       if (x < 10)
       {

       $('#text').val(x+1);
       x = x+1;
       rec10(x);

       }



 }

问题是，每当我激活此功能时，文本框只会直接显示“10”，我希望代码从0移动到1，再移到2 ......直到10.在文本中显示每一个框。我尝试使用setInterval和setTimeout，但我没弄清楚如何使用它。非常感谢你

Answer 1

而不是：

rec10(x);

呼叫

setTimeout(function() { rec10(x); }, 1000);

Answer 2

使用setInterval，您可以使用以下代码：

function rec10(x) {
    var interval = setInterval(function() {
        if (x >= 10) clearInterval(interval);
        $('#text').val(x++);
    }, 1000);
 }

Answer 3

JavaScript是单线程的，这意味着在代码运行时，您对DOM所做的更改将不会在浏览器上显示，直到您的代码完成。

您需要控制浏览器几秒钟，可以使用setTimeout完成：

function rec10(x){

       if (x < 10){
           $('#text').val(++x);

       setTimeout(function(){
           rec10(x);               
       },20);

       }
 }

Answer 4

您是否仅仅因为无法完成递归功能而诉诸setInterval / setTimeout了吗？
如果是这种情况，请在不使用setInterval / setTimeout的情况下使用此递归函数：

function rec10(x) {
    if (x <= 10) {
        if (x <= 0) x = 1;

        //append?
        $('#text').val(x);

        rec10(x + 1);
    }
}

rec10(1);

但上面代码的问题是它会发生得如此之快，以至于你不会注意到数字1打印到9。如果您想查看这些数字，我建议您将该值附加到占位符$('#text') 但是，如果您真的想看到正在打印的数字然后被下一个数字替换，那么您可以参考使用setInterval / setTimeout的其他用户发布的答案。

用于在JavaScript中打印数字的递归函数

4 个答案: