JS设置定时器和清除定时器

章鱼欧巴

于 2024-07-03 11:07:37 发布

阅读量317

点赞数 4

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/maizangneiai/article/details/140146953

版权

<html>
<head>
    <meta charset="utf-8">
    <title>定时器</title>
</head>
<body>
<button onclick="startInterval()">开始Interval</button>
<button onclick="stopInterval()">停止Interval</button>
<button onclick="startTimeout()">正常Timeout定时器</button>
<button onclick="startTimeoutTwo()">循环的Timeout定时器</button>
<button onclick="stopTimeout()">停止Timeout</button>
<script>
    var intervalBox;//interval定时器存储器
    //设置interval定时器
    function startInterval() {
        clearInterval(intervalBox);//初始化interval定时器，防止定时器重叠
        intervalBox = setInterval(function(){//设置interval定时器
            console.log(intervalBox);//打印interval定时器，查看interval定时器效果
        }, 1000);//定时器间隔时间1000ms
    }
    //结束interval定时器
    function stopInterval() {
        clearInterval(intervalBox);//清除interval定时器
    }

    var timeoutBox;//timeout定时器存储器
    //设置正常的timeout定时器
    function startTimeout() {
        clearTimeout(timeoutBox);//初始化timeout定时器，防止定时器重叠
        timeoutBox = setTimeout(function(){//设置timeout定时器
            console.log(timeoutBox);//打印timeout定时器，查看timeout定时器效果
            clearTimeout(timeoutBox);//清除当前timeout定时器，timeout定时器只运行一次代码，直接清掉它
            // location.href="timer.html";//一段时间后跳转页面是setTimeout的常用场景之一
        }, 1000);
    }
    //设置循环的timeout定时器
    function startTimeoutTwo() {
        clearTimeout(timeoutBox);//初始化timeout定时器，防止定时器重叠
        timeoutBox = setTimeout(function(){
            console.log(timeoutBox);//打印timeout定时器，查看timeout定时器效果
            startTimeoutTwo();//循环调用函数自身，以达到循环的效果
        }, 1000);
    }
    // 结束循环的timeout定时器
    function stopTimeout() {
        clearTimeout(timeoutBox);
    }
</script>
</body>
</html>