关于js_定时器的介绍和使用

最新推荐文章于 2024-01-14 21:43:58 发布

NewBurlaSKing

最新推荐文章于 2024-01-14 21:43:58 发布

阅读量91

点赞数

分类专栏： javascript 文章标签： javascript 开发语言前端 html

本文链接：https://blog.csdn.net/qq_55961861/article/details/126353698

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

js_定时器

一.定义

JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由 setTimeout() 和 setInterval() 这两个函数来完成。它们向任务队列添加定时任务。

二.使用

setTimeout

用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

取消定时器：clearTimeout(定时器对象);

注意：如果回调函数是对象的方法，那么 setTimeout 使得方法内部的 this 关键字指向全局环境，而不是定义时所在的那个对象内部环境！

实例：

<!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>
</head>
<body>
    
    <script>
        // var t = setTimeout(function() {
        //     console.log('时间到了！');
        // },4000);
        // clearTimeout(t);
        var name = '全局name'
        var user = {
            name:'user对象name',
            getName:function() {
                // 本来是谁调用了这个方法，那么这个this就指向那个对象，但是：
                //如果在对象内部函数中使用了setTimeout函数,并且用到了this,
                // 则这个this不是指向对象，而是全局，而全局中有个name,故能使用
                // setTimeout(function() {
                //     console.log(this.name);
                // },4000)
                // 解决办法:
                var that = this;
                setTimeout(function() {
                    console.log(that.name);
                },4000)
            }
        };
        user.getName();
    </script>
</body>
</html>

setInterval

指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行，其他注意事项与setTimeout一致

清除定时器：clearInterval(定时器对象);

实例：实现一块颜色区域的呼吸效果！

<!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>
    <style>
        .box {
            width: 150px;
            height: 150px;
            background-color: aquamarine;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <script>
        var box = document.getElementById('box');
        var opacity = 1;
        var flag = 1;
        setInterval(function(){
            if(flag) {
                opacity -= 0.05;
                box.style.opacity = opacity;
                if (opacity<0) {
                    flag = 0;
                }
            } else {
                opacity += 0.05;
                box.style.opacity = opacity;
                if (opacity > 1) {
                    flag = 1;
                }
            }
        },60);
        
    </script>
</body>
</html>