JS中setInterval和setTimeout的区别

最新推荐文章于 2024-05-29 15:14:06 发布

培根熏肉

最新推荐文章于 2024-05-29 15:14:06 发布

阅读量3k

点赞数

分类专栏：前端学习文章标签：前端开发 javascript settimeinterval setTimeout 区别

本文链接：https://blog.csdn.net/mystric594/article/details/71713610

版权

前端学习专栏收录该内容

11 篇文章 1 订阅

订阅专栏

萌新首发~~记录自己的学习心得，希望高手指出不足的地方

首先免不了先看两者的基本定义与用法：

1.setInterval的基本语法：

setInterval(code,millisec[,"lang"])

参数	描述
code	必需。要调用的函数或要执行的代码串。（若是函数，则只需要写函数名，可以不加双引号和括号）
millisec	必需。周期性执行或调用 code 之间的时间间隔，以毫秒计。

2.setTimeout的基本语法：

setTimeout(code,millisec)

参数	描述
code	必需。要调用的函数后要执行的 JavaScript 代码串。（若是函数，则只需要写函数名，可以不加双引号和括号）
millisec	必需。在执行代码前需等待的毫秒数。

乍一看，感觉这两个区别可大了去了。最主要的就是功能不同：setInterval实现的是根据给定的时间间隔，每隔一段时间调用一次函数或执行一次代码。而setTimeout实现的是根据给定的时间，在经过该时间之后只调用一次函数或执行一次代码。那么有什么必要要区分这两个方法呢？举一个例子来感受一下实际应用中两者有多么的相似。

【例子】浏览器实现钟表功能（每一毫秒更新一次显示的数值）

（1）利用setInterval实现

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> 计时器 </title>
    <script type="text/javascript">
        function clock(){
            var time=new Date();
            time=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds()+":"+time.getMilliseconds();
            document.getElementById("clock").value=time;
        }
        setInterval(clock,1);
    </script>
</head>
<body>
<div align="center">
    <input type="textarea" id="clock"/>
</div>
</body>
</html>

（2）利用setTimeout实现：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> 计时器 </title>
    <script type="text/javascript">
        function clock(){
            var time=new Date();
            time=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds()+":"+time.getMilliseconds();
            document.getElementById("clock").value=time;
            setTimeout(clock,1);
        }
        setTimeout(clock,1);
    </script>
</head>
<body>
<div align="center">
    <input type="textarea" id="clock"/>
</div>
</body>
</html>

※在本例中，我们甚至可以把第二个setTimeout用setInterval替换。

※一般而言，如果当前使用方法所属对象是当前宿主顶级对象window，则可以直接写方法，而不用写宿主。如本例也可以写成window.setTimeout（）。

两者实现的效果都一致，如下图所示：

虽然前面我们认为两者差别特别大，但在本例的题设条件下，似乎两者都能解决问题。所以，是不是大家会对在具体情况中这两者到底有什么区别产生了疑问呢？以下是笔者站在巨人的肩膀上之后得到的结论：

setTimeout代码执行条件是等待上一条代码执行结束并等待你设定好的时间之后再执行

setInterval不会等待上一条代码执行结束，而是完全按照你设定的时间间隔执行

所以当你需要对间隔时间精确地控制时，采用setInterval会更合适。另外也没有什么太大的差别，都可以用。

培根熏肉

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS中setInterval和setTimeout的区别

萌新首发~~记录自己的学习心得，希望高手指出不足的地方首先免不了先看两者的基本定义与用法： 1.setInterval的基本语法：setInterval(code,millisec[,"lang"]) 参数描述code必需。要调用的函数或要执行的代码串。（若是函数，则只需要写函数名，可以不加双引号和括号）mil
复制链接

扫一扫