setTimeout与setInterval的区别与机制

学习前端的渣渣

已于 2023-05-05 15:49:46 修改

阅读量136

点赞数

分类专栏：前端面试题 JavaScript 文章标签： javascript 前端 html

于 2022-09-26 17:24:48 首次发布

本文链接：https://blog.csdn.net/fangqi20170515/article/details/126092516

版权

前端面试题同时被 2 个专栏收录

103 篇文章 2 订阅

订阅专栏

JavaScript

79 篇文章 0 订阅

订阅专栏

1、setTimeout-----延时器

用于在指定的毫秒数后调用函数或计算表达式。只执行一次

let num=1;
setTimeout(()=>{
    num++;
    console.log(num);//2
},2000)

如果这个时间设为 0，就代表立即插入队列，但不是立即执行，仍然要等待前面代码执行完毕。是否及时执行取决于 JavaScript 线程是拥挤还是空闲。

2、setInterval-----定时器

每隔指定的毫秒数循环调用函数或表达式。直到clearInterval把它清除。

let num=1;
const timer=setInterval(()=>{
    num++;
    console.log(num);
    if(num===5){
         clearInterval(timer);
    }
},1000)

在这里插入图片描述

3、使用延时器实现定时器的效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="box"></div>
<input type="button" id="btn" value="点击"/>

<script type="text/javascript">
    const oBtn = document.getElementById('btn');
    const oBox = document.getElementById('box');
    let num = 0

    function add() {
        num++;
        oBox.innerHTML = num;
        // setTimeout("add()",1000)；
        setTimeout(add, 1000);
    }

    oBtn.onclick = function () {
        add();
    }

</script>
</body>
</html>