JavaScript setTimeout和setInterval的用法与区别详解

目录

I. 总述

II. setTimeout()函数

III. setInterval()函数

IV. 新年倒计时案例

---

Javascript的setTimeOut和setInterval函数应用非常广泛，它们都用来处理延时和定时任务，下面这篇文章主要给大家介绍了关于JavaScript setTimeout和setInterval的用法与区别，如果大家有需要可以参考下。

I. 总述

首先，setTimeout()和setInterval()函数是JavaScript中两个很重要的关于"时间的函数"，因此，我们在学习JavaScript的过程中，一定要对这两个函数有一个深入的学习，它们两个函数也是经常被使用的！

 其中，如果分别用一句话来概括这两个函数，那么应该是这样的：

setTimeout(): 该函数能够按照设定的时间值延迟执行其中的事件。

setInterval(): 该函数能够按照设定的时间值作为间隔，周期性的执行其中的时间。

当然了，只是简述，细节方面，我们在下面的部分给大家做讲解。

II. setTimeout()函数

首先是我们的setTimeout()函数，它的格式是怎么样的呢：

setTimeout(function,times, param1, param2, …);

setTimeout 是一个定时器函数，它允许我们在指定的时间后执行一次函数。其中，function 是我们要执行的函数，times 是延迟的时间（以毫秒为单位），param1, param2, … 等是传递给函数的参数（可选）。例如我们看这段简单的代码：

setTimeout(function(){

    alert("hello,setTimeout()");

}, 1000);

运行之后，它会在1s的延迟之后，弹出一个弹框，其中，1000的单位是毫秒！

学到这里，大家觉得很简单，对吗？好的，那我给一段代码，大家猜一下它会输出什么：

for (var i = 1; i <= 5; i++) {
    setTimeout(function () {
        alert(i)
    }, 1000)
}

哎，有人要说了，简单啊，这不是输出：1 2 3 4 5 吗？

然而实际上，它