JS的定时器和清除定时器

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

常用的定时器有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>

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

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

相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页