setTimeout() 与 setInterval() 异同

setTimeout()

这里浏览器将在执行匿名函数之前等待两秒钟，然后将显示警报消息

let myGreeting = setTimeout(function() {
  alert('Hello, Mr. Universe!');
}, 2000)

缺陷
您可以使用递归的setTimeout（）调用以类似于setInterval（）的方式重复运行函数，使用如下代码：

let i = 1;
setTimeout(function run() {
  console.log(i);
  i++;

  setTimeout(run, 100);
}, 100);

递归setTimeout（）和setInterval（）之间存在差异：

递归setTimeout（）保证执行之间至少经过指定的时间（在本例中为100ms）;代码将运行，然后等待100毫秒再次运行。无论代码运行多长时间，间隔都是相同的。

使用setInterval（），我们选择的间隔包括执行我们想要运行的代码所花费的时间。假设代码需要40毫秒才能运行
––然后间隔最终只有60毫秒。 当你的代码有可能比你分配的时间间隔更长时间运行时，最好使用递归的setTimeout（）
––这将使执行之间的时间间隔保持不变，无论代码执行多长时间，你不会得到错误。

setInterval()

以下函数创建一个新的Date()对象，使用toLocaleTimeString()从中提取时间字符串，然后在UI中显示它。然后我们使用setInterval（）每秒运行一次，创建每秒更新一次的数字时钟的效果

function displayTime() {
   let date = new Date();
   let time = date.toLocaleTimeString();
   document.getElementById('demo').textContent = time;
}

const createClock = setInterval(displayTime, 1000);

缺陷
帧速率未针对运行动画的系统进行优化，并且可能效率低下。除非您需要选择特定（较慢）的帧速率，否则通常最好使用requestAnimationFrame().