JS 定时器（使用方法和取消方法）

最新推荐文章于 2024-05-07 20:44:43 发布

星灭233

最新推荐文章于 2024-05-07 20:44:43 发布

阅读量3k

点赞数

分类专栏： JS 知识总结文章标签： js javascript dom 定时器前端

本文链接：https://blog.csdn.net/ksx2333/article/details/116041191

版权

知识总结同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

16 篇文章 1 订阅

订阅专栏

文章目录

前言

关于定时器的一些应用
定时器可用于轮播图，广告弹窗…

JS代码分类：
         1）同步代码  同步任务   主线程立即可以执行的任务  代码的书写顺序和代码的执行顺序一样。
         2）异步代码  异步任务   需要一个小线程去执行 代码的书写顺序和代码的执行顺序不一样 如：定时器...

    定时器：
        一次性定时器：setTimeout(函数, 时间ms)   时间一到，执行对应的函数  
        循环定时器：每隔固定的时间，执行一次函数  steInterVal(函数，时间ms)

js定时器有以下两个方法

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。（执行无数次）
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。（执行一次）

清除定时器的方法

clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。

案例1（控制台显示）

    <script>
        var tima = 233;
        var time = 1;
        console.log(tima);

        setTimeout(function () {
            tima++;
            console.log("天啊！经过一秒钟后居然加了1！" + tima);
        }, 1000);      //1秒
        console.log(time);
        setInterval(() => {
            time++;
            console.log("我还在加1:" + time);
        }, 3000);      //3秒
    </script>

效果图：在这里插入图片描述

案例2（html显示）

<html>
<body>
    <input type="text" id="clock" />
    <script type="text/javascript">
        var int = self.setInterval("clock()", 1000);
        function clock() {
            var d = new Date();
            var t = d.toLocaleTimeString();
            //toLocaleTimeString() 方法可根据本地时间把 Date 对象的时间部分转换为字符串，并返回结果。
            document.getElementById("clock").value = t;
        }
    </script>
    <button onclick="int=window.clearInterval(int)">停止</button>
</body>
</html>

效果图：在这里插入图片描述

案例3（setTimeout实现循环的方法）

    <script>
        function 循环(){
            console.log("循环输出的内容");
            setTimeout("循环()",100)
        }循环()
    </script>

<html>
<head>
    <script type="text/javascript">
        var c = 0
        var t
        function timedCount() {
            document.getElementById('txt').value = c
            c = c + 1
            t = setTimeout("timedCount()", 100)
            // 这里把一次性定时器写在了函数内部，而定时器又在调用函数，就会就形成了不断调用setTimeout的循环情况
        }
        function stopCount() {
            clearTimeout(t)
        }
    </script>
</head>
<body>
    <form>
        <input type="button" value="开始计时" onClick="timedCount()">
        <input type="text" id="txt">
        <input type="button" value="结束计时" onClick="stopCount()">
    </form>
</body>
</html>

效果图：在这里插入图片描述

星灭233

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS 定时器（使用方法和取消方法）

关于定时器的一些应用（包括添加定时器和清除定时器的方法）定时器属于异步代码。定时器：一次性定时器：setTimeout(函数, 时间ms) 时间一到，执行对应的函数循环定时器：每隔固定的时间，执行一次函数 steInterVal(函数，时间ms)
复制链接

扫一扫