递归函数以在JavaScript中打印数字

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发布的答案。