浅谈setTimeout与setInterval

简介

在JavaScript中，setTimeout与setInterval是常用的计时器函数。它们可以用来定时执行函数，控制代码的执行流程。本文将从以下几个方面对setTimeout与setInterval进行详细讲解。

• setTimeout的用法及注意事项
• setInterval的用法及注意事项
• setTimeout与setInterval的区别
• 示例说明

setTimeout的用法及注意事项

setTimeout是在指定的时间间隔后执行一次指定的函数。它的基本用法如下：

setTimeout(function(){
  // 需要执行的代码
}, 延迟的毫秒数);

注意事项：

1. setTimeout第一个参数是一个函数，可以是匿名函数也可以是已经声明好的函数。如果要传递参数，可以使用匿名函数
2. setTimeout第二个参数是一个表示时间的整数，单位是毫秒

setInterval的用法及注意事项

与setTimeout类似，setInterval也可以用来定时执行函数。但是与setTimeout不同的是，它会每隔指定的时间间隔执行一次该函数。

var id = setInterval(function(){
  // 需要执行的代码
}, 时间间隔的毫秒数);

注意事项：

1. setInterval第一个参数也是一个函数，可以是匿名函数也可以是已经声明好的函数
2. setInterval第二个参数是一个表示时间的整数，单位是毫秒
3. setInterval会返回一个唯一的标识符，可以用于停止执行

setTimeout与setInterval的区别

setTimeout与setInterval在使用时有很大的区别。下面是它们之间的主要区别：

• setTimeout是在指定的时间后执行一次指定的函数，而setInterval则会每隔一段时间执行一次指定的函数
• setInterval会一直执行下去，除非使用clearInterval停止执行，而setTimeout只会执行一次

示例说明

案例1

下面是一个使用setTimeout实现时间倒计时的示例：

function countDown(seconds){
  var intervalId = null;
  if(seconds > 0){
    intervalId = setTimeout(function(){
      countDown(seconds - 1);
    }, 1000);
  } else {
    console.log('倒计时结束！');
  }
}

countDown(10);

案例2

下面是一个使用setInterval创建一个滚动的新闻列表的示例：

var newsList = ['新闻1', '新闻2', '新闻3', '新闻4', '新闻5'];
var currentIndex = 0;
var intervalId = null;

function scrollNews(){
  if(currentIndex < newsList.length){
    console.log(newsList[currentIndex++]);
  } else {
    currentIndex = 0;
  }
}

intervalId = setInterval(scrollNews, 2000);

上面的示例中，我们使用setInterval每隔2秒执行一次scrollNews函数。该函数的作用是在控制台中打印新闻列表中的每一个元素。当currentIndex超过数组长度时，将currentIndex重置为0。