JS的定时器和清除定时器

最新推荐文章于 2024-03-08 17:25:46 发布

Web_阿凯

最新推荐文章于 2024-03-08 17:25:46 发布

阅读量5.4k

点赞数

分类专栏： JS 文章标签： JS的定时器和清除定时器

本文链接：https://blog.csdn.net/weixin_45122120/article/details/91360977

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在我们的项目开发中，难免会需要按周期执行一些代码，这就需要定时器这个功能。

常用的定时器有2种

setTimeout(function() {}, 1000);       //一秒钟以后执行一次
setInterval(function() {}, 1000);		//每一秒钟执行一次
//需要注意的是这里说的一秒是大约一秒，定时器还是会有细微的时间差

下面通过一个小demo来看一下效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <script type="text/javascript">
    window.onload = function() {

        var test1 = setTimeout(function(){
            console.log("我是setTimeout定时器");
        },1000);
        //setInterval 每隔1000ms执行一次
        var test2 = setInterval(function(){
            console.log("我是setInterval定时器");
        },1000)
    }
    </script>
</body>
</html>

代码执行结果想必大家都知道，就是一秒以后输出一次“我是setTimeout定时器”，

每一秒输出一次"我是setInterval定时器"。
在这里插入图片描述

为了让定时器停下来我们需要使用清除定时器

clearTimeout();		//清除setTimeout定时器
clearInterval();	//清除setInterval定时器

用一个小demo来看下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <button type="">清除定时器</button>
    <script type="text/javascript">
    window.onload = function() {
        var test1 = setTimeout(function(){
            console.log("我是setTimeout定时器");
        },1000);
        var test2 = setInterval(function(){
            console.log("我是setInterval定时器");
        },1000)
        var btn = document.querySelector('button');
        btn.onclick = function() {
            clearInterval(test2);
            clearTimeout(test1);
        }
    }
    </script>
</body>
</html>

当我们点击清除定时器时，定时器功能失效

需要注意的是，我们清除清时期不仅是为了暂停将定时器功能，还有一个就是释放内存。

Web_阿凯

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS的定时器和清除定时器

在我们的项目开发中，难免会需要按周期执行一些代码，这就需要定时器这个功能。常用的定时器有2种setTimeout(function() {}, 1000); //一秒钟以后执行一次setInterval(function() {}, 1000); //每一秒钟执行一次//需要注意的是这里说的一秒是大约一秒，定时器还是会有细微的时间差下面通过一个小demo来看一下效果&l...
复制链接

扫一扫