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

我正在尝试使用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，但我不知道如何使用它。非常感谢

而不是：

rec10(x);

召唤

而不是：

rec10(x);

召唤

---

JavaScript是单线程的，这意味着当代码运行时，在代码完成之前，不会在浏览器上看到对DOM所做的更改

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

---

JavaScript是单线程的，这意味着当代码运行时，在代码完成之前，不会在浏览器上看到对DOM所做的更改

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

通过设置间隔，您可以使用以下代码：

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

通过设置间隔，您可以使用以下代码：

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

您使用setInterval/setTimeout仅仅是因为您无法生成一个有效的递归函数吗？ 如果是这样的话，下面这个递归函数不使用setInterval/setTimeout如何：

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

你使用setInterval/setTimeout仅仅是因为你不能使用递归函数吗？ 如果是这样的话，下面这个递归函数不使用setInterval/setTimeout如何：

但是上面代码的问题是，它会发生得很快，你不会注意到数字1到9的打印。 如果您想查看这些数字，那么我建议您将该值附加到占位符$'text'中。

---

---

但是如果你真的想看到数字被打印出来，然后被下一个数字替换，那么你可以参考其他用户发布的使用setInterval/setTimeout的答案。

使用setTimeout或setInterval，如果你必须使用递归，你必须打印到控制台。为什么需要递归？setTimeoutfunction{rec10x， 1000; 而不是rec10x；穆萨，我已经试过了，在文本框PM 77-1中仍然只显示了10个，我只是想提高我的技能和学习新东西，这就是为什么我使用递归使用setTimeout或setInterval，如果你必须使用递归，你必须打印到控制台。为什么你需要递归？setTimeoutfunction{rec10x；}，1000；而不是rec10x；Musa，我已经试过了，文本框PM 77-1中只显示了10个，我只是想提高我的技能和学习新东西，这就是为什么我使用递归，它工作得很好，你能告诉我为什么我需要这样做吗？调用超时而不是函数itself@bert，请看下面我的答案。@bert：因为函数通常运行得很快，浏览器从来没有真正的“窗口”来更新文本框。从视觉上看，它直接到10。你需要人为地增加延迟，让浏览器有时间更新用户界面。效果很好，你能告诉我为什么要这样做吗？调用超时而不是函数itself@bert，请看下面我的答案。@bert：因为函数通常运行得很快，浏览器从来没有真正的“窗口”来更新文本框。从视觉上看，它直接到10。您需要人为地添加此延迟以给浏览器更新UI的时间。20ms可能有点太长short@Paul，为什么呢？20毫秒对于这个小JS函数来说是足够的时间。OP说他想看到每个数字都出现在盒子里。但在20ms/number时，所有10个数字将在1/5秒内闪烁。@gdoron谢谢您提供的信息，还有一个问题，我尝试使用setTimeoutrec10x，1000；不起作用，是语法问题吗？20ms可能有点太慢了short@Paul，为什么呢？20毫秒对于这个小JS函数来说是足够的时间。OP说他想看到每个数字都出现在盒子里。但在20ms/number时，所有10个数字将在1/5秒内闪烁。@gdoron谢谢您提供的信息，还有一个问题，我尝试使用setTimeoutrec10x，1000；这不起作用，是语法问题吗？我明白，但我基本上想做一个计数，所以我不得不放慢函数的速度：@bert，这不是真的：但上面代码的问题是，它发生得太快了，你不会注意到数字1到9的打印。这不是因为javascript的速度，而是因为它的单线程特性。@gdoron，我说的是执行时间，不管是否是单线程的，执行速度总是很快的

---

可由人眼观察的。你能在不使用任何形式的延迟的情况下观察1-9的打印吗？即使你的垃圾邮件操作需要1秒钟，你也看不到更改。测试它。我明白，但我基本上想做一个计数，所以我不得不放慢函数的速度：@bert，这不是真的：但上面代码的问题是，它发生得太快了，你不会注意到数字1到9的打印。这不是因为javascript的速度，而是因为它的单线程特性。@gdoron，我说的是执行时间，不管是否是单线程的，它总是发生得如此之快，以至于人眼都能观察到。你能在不使用任何形式的延迟的情况下观察1-9的打印吗？即使你的垃圾邮件操作需要1秒钟，你也看不到更改。测试一下。

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

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

        rec10(x + 1);
    }
}

rec10(1);