JavaScript 定时器

最新推荐文章于 2024-11-08 16:09:18 发布

toptap8_nn

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量106

点赞数

分类专栏： web前端文章标签： javascript html html5 css 定时任务

本文链接：https://blog.csdn.net/u011713916/article/details/119939499

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这个博客介绍了JavaScript中的两种定时器：setTimeout用于一次性延迟调用函数，clearTimeout用于取消定时器；而setInterval用于周期性调用函数，通过clearInterval可以停止循环调用。示例中展示了如何使用这些函数来显示和停止提醒信息。

摘要由CSDN通过智能技术生成

定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 根据一定的时间间隔延时调用函数 -->
    <script>
        // 定义函数
        function fun(name,age){
            alert("okokok");
            alert(name+age);
            alert(tid);
            // 销毁定时器
            clearTimeout(tid);

        };
        // 根据时间间隔调用一次函数的定时器
        // 参数为1为执行函数名，2为时间，3为函数传递的参数
        // 定时器用完要销毁
        var tid = setTimeout(fun,500,'szw',18) ;
        // setTimeout返回值为id，就是第几个定时器；上面例子为1
        

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

循环调用的定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function fshowInfo(name, age){
            alert("我是"+name+'年龄是'+age);

        };

        // 创立循环定时器
        var inId = setInterval(fshowInfo,2000,'lisi',18);

        function fStop(){
            // 拿到id之后销毁
            clearInterval(inId);
            alert("恭喜你停止成功");
        } 

    </script>

    <style>
        .greencolor{
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <!-- 设置停止按钮 -->
    <input type="button" value="stop" onclick="fStop();" class="greencolor">
    
</body>
</html>