Day09-JavaScript

前端拓海

已于 2023-12-02 15:08:50 修改

阅读量104

点赞数 3

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

于 2023-11-29 19:02:14 首次发布

本文链接：https://blog.csdn.net/Spirs/article/details/134696857

版权

一.超时定时器

    <script>

        // BOM:浏览器 对象 模型
        // 浏览器 提供给我们一套api 用来控制浏览器的 行为

        // setTimeout(callback,ms);
        // 回调函数：在执行完一段代码之后 紧接着自动的去调用另一个函数

        setTimeout(function() {
            console.log("三秒之后执行");
        }, 3000)
        setTimeout(function() {
            console.log("两秒之后执行");
        }, 2000)
        setTimeout(function() {
            console.log("一秒之后执行");
        }, 1000)

        console.log(123);

        // 在一段时间之后 调用一次 回调函数
        // 定时器 是异步的
        // JS代码是单线程

    </script>

二.清除超时定时器

<body>

    <div class="box"></div>

    <script>

        var box = document.getElementsByClassName("box")[0];

        // 清除超时定时器 两种方法
        // 1.将定时器保存给一个变量之后 这个变量存储的是 定时器的ID
        // setTimeout()

        var timer = setTimeout(function() {
            console.log("两秒之后执行");

            // 定时器可以在内部清除
            clearTimeout(timer);
        }, 2000)
        console.log(timer);

        var timer2 = setTimeout(function() {
            console.log("三秒之后执行");
        }, 3000)
        console.log(timer2);

        // clearTimeout();
        // 清除定时器 其实就是把定时器的id删除 这样就不会执行了

        // 为什么要清除定时器？
        // 因为定时器会浪费 浏览器的性能，也可能造成内存的泄露 防止定时器叠加

        // 2.使用DOM对象来保存 定时器的ID
        box.timer3 = setTimeout(function() {
            console.log("一秒之后执行");
        }, 1000);
        console.dir(box);

        clearTimeout(box.timer3);

    </script>

</body>

三.间歇定时器

<body>

    <div class="box"></div>

    <script>

        var box = document.getElementsByClassName("box")[0];

        //间歇定时器 ： 每隔一段时间之后调用一次 回调函数
        // setInterval(callback,ms)

        // setInterval(function () { 
        //     console.log("一秒执行一次");
        // }, 1000)

        function getTime() {
            var date = new Date();
            var y = date.getFullYear();
            var m = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : "0" + (date.getMonth() + 1);
            var d = date.getDate() >= 10 ? date.getDate() : "0" + date.getDate();
            var h = date.getHours() >= 10 ? date.getHours() : "0" + date.getHours();
            var f = date.getMinutes() >= 10 ? date.getMinutes() : "0" + date.getMinutes();
            var s = date.getSeconds() >= 10 ? date.getSeconds() : "0" + date.getSeconds();

            box.innerHTML = `${y}年${m}月${d}日    ${h}时${f}分${s}秒`;
        }
        getTime();

        // 模板字符串
        // box.innerHTML = `${y}年${m}月${d}日    ${h}时${f}分${s}秒`;
        // y + "年" + m + "月" + d + "日" + h + "时" + f + "分" + s + "秒"

        var timer = setInterval(getTime, 1000);

        // clearInterval(定时器id);
        // clearInterval(timer);

    </script>

</body>