JS 递归和定时器的实例解析

什么是递归？

递归是一种算法或函数设计技术，它是通过函数体内调用函数本身来完成的。通常情况下，递归函数是以递归式的表达式来定义的。简单来说，递归可以看作是把大的问题不断化解成相同的小问题，最终解决相同的小问题就能解决大的问题。

递归的示例

function sum(n) { 
  if (n <= 1) return 1;
  return n + sum(n - 1);
}

上面的代码实现了求 n 个数的和。当 n <= 1 时，停止递归，返回 1。否则继续执行 return n + sum(n - 1)，即返回 n 和 n - 1 的和，由于 n - 1 比 n 小，因此一直递归，直到 n <= 1 时停止递归。

什么是定时器？

JavaScript 提供了两种定时器：setTimeout 和 setInterval。这两种定时器都会在指定的时间间隔之后执行一次或多次指定的代码。

setTimeout 和 setInterval 的区别是 setTimeout 只会执行一次指定的代码，而 setInterval 则会每隔指定的时间间隔执行一次指定的代码，直到被取消。

定时器的示例

function func1() {
  console.log('Hello');
}

setTimeout(func1, 2000);

上面的代码定义了在 2 秒后执行 func1 函数。

let count = 0;
let intervalId = setInterval(function() {
  count += 1;
  console.log(count);
}, 1000);

setTimeout(function() {
  clearInterval(intervalId);
}, 5000);

上面的代码定义了每隔 1 秒执行一次匿名函数，输出计数器的值，直到执行 5 秒后停止定时器。

递归和定时器的联合使用

使用递归和定时器可以实现一些有趣的效果，例如倒计时、动态效果等等。

let count = 5;
let timeId = setInterval(function() {
  count -= 1;
  console.log(count);
  if (count <= 0) {
    clearInterval(timeId);
  }
}, 1000);

上面的代码实现了一个倒计时效果，每隔 1 秒输出当前的倒计时数值，当数值为 0 时停止定时器。

let level = 0;
let maxLevel = 10;

function animate() {
  level += 1;
  console.log(level);
  if (level < maxLevel) {
    setTimeout(animate, Math.random() * 1000);
  }
}

animate();

上面的代码实现了一个随机动态效果，使用递归和定时器实现了每隔随机的时间执行一次 animate 函数，并输出当前的动画进度。