JavaScript基础（十一）——计时器方法

已于 2022-04-17 14:40:17 修改
阅读量7.8k 收藏 53
点赞数 9
分类专栏： JavaScript基础 文章标签： javascript es6
于 2022-04-15 21:07:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41523175/article/details/124178973
版权

一、setInterval()与clearInterval()

<body>
    <button class="btn">暂停</button>
    <script>
        let timer = setInterval(function () {
            console.log("hello world");
        }, 1000)

        let btn = document.querySelector(".btn");
        btn.onclick = function () {
            clearInterval(timer);
        }
    </script>
</body>

效果如下：

分析：

可以给setInterval设置一个返回值timer。

那么就可以使用clearInterval(timer)，来终止计时器。 

二、案例一——显示当前时间

<body>
    <h1></h1>
    <script>
        let h1 = document.querySelector("h1");
        setInterval(function () {
            let time = new Date();
            let hours = time.getHours();
            let minutes = time.getMinutes();
            let seconds = time.getSeconds();
            h1.innerHTML = `${hours}:${minutes}:${seconds}`;
        }, 1000)
    </script>
</body>

效果如下：

分析：

每隔1秒，自动获取当前时间，并在浏览器中显示。 

三、案例二——秒表

<!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>Demo27</title>
</head>

<body>
    <button class="start">开始</button>
    <button class="pause">暂停</button>
    <button class="stop">重置</button>
    <h1></h1>
    <script>
        let start = document.querySelector(".start");
        let pause = document.querySelector(".pause");
        let stop = document.querySelector(".stop");
        let h1 = document.querySelector("h1");
        let seconds = 0;
        let ms = 0;
        h1.innerHTML = `${seconds}:${ms}`;

        let timer = null;

        start.onclick = function () {
            // 重复点击开始按钮时，先停止上一次的计时器
            clearInterval(timer);
            timer = setInterval(() => {
                if (ms === 9) {
                    ++seconds;
                    ms = 0;
                }
                ++ms;
                h1.innerHTML = `${seconds}:${ms}`;
            }, 100);
        }

        pause.onclick = function () {
            clearInterval(timer);
        }

        stop.onclick = function () {
            clearInterval(timer);
            seconds = 0;
            ms = 0;
            h1.innerHTML = `${seconds}:${ms}`;
        }
    </script>
</body>

</html>

效果如下：

四、setTimeout和clearTimeout 

<body>
    <h1>5秒后,跳转到百度...</h1>
    <script>
        setTimeout(() => {
            location.href = "https://www.baidu.com";
        }, 5000)
    </script>
</body>

效果如下：

分析：

location.href：表示跳转到其他链接。 

setTimeout()：表示，过多少秒后，执行方法。

五、防抖与节流

1、提出问题

某些事件，在短时间内会触发很多次。这极大的影响了性能。

比如window.onscroll事件，如下：

<!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>Demo29</title>
    <style>
        body {
            height: 2000px;
        }
    </style>
</head>

<body>
    <h1>windows.onscroll</h1>
    <script>
        window.onscroll = function(){
            console.log("hello world");
        }
    </script>
</body>

</html>

效果如下：

如图所示，鼠标滚轮轻轻滚动，事件在短时间内就触发了很多次。 

如何解决呢？

2、防抖

<!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>Demo29</title>
    <style>
        body {
            height: 2000px;
        }
    </style>
</head>

<body>
    <h1>windows.onscroll</h1>
    <!-- 防抖 -->
    <script>
        let timer = null;
        window.onscroll = function () {
            // timer（计时器）不为空时，则让它停止
            if (timer != null) {
                clearTimeout(timer);
            }

            // 鼠标滚动一次，则立马执行计时器
            // 计时器启动时，timer就不为空，则立马停止，并且打印，并且将timer置为空
            timer = setTimeout(() => {
                console.log("hello world");
                timer = null;
            }, 500)
        }
    </script>
</body>

</html>

效果如下：

  

效果分析：

在0.5秒内，如果多次滚动滚轮，则不会重复执行事件。

停止滚动时，才执行事件。

代码分析：

当鼠标滚动时，启动计时器，0.5秒后，执行事件。也就是说，0.5秒内，setTimeout内的代码没有执行。

此时，timer不为空了。就会把上一次的计时器（或者可以称作延时器）清除掉，并且鼠标持续滚动，也就是持续地开启下一个计时器。 

直到我们停止滚轮滚动，清除计时器的代码不再执行，就只执行最后一次（上一次的计时器没有清除掉）的代码。

并且将timer置为空，下次可以再次使用。

从而实现防抖功能。

一次都不会执行。

 3、节流

    <!-- 节流 -->
    <script>
        let mark = true;
        window.onscroll = function () {
            if (mark) {
                setTimeout(() => {
                    console.log("hello world");
                    mark = true;
                }, 500)
            }
            mark = false;
        }
    </script>

效果如下：

效果分析：

当我们持续滚动滚轮时，每隔0.5秒，照样会执行事件。

当我们停止滚动时，最后再执行一次，则停止执行事件。 

 代码分析：

设个标记mark，初值为true。

滚轮滚动时，开启计时器，0.5秒后执行事件。

随后，mark被置为false。此时不再进入if方法。

然而，0.5秒后，事件启动，并且mark再次被置为true。因为滚轮持续在滚动，则，再一次进入if方法。从而开启下一个计时器。

这样就达到每0.5秒都执行一次事件。

4、案例——返回顶部（利用闭包封装算法）

<!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>Demo30</title>
    <style>
        body {
            height: 2000px;
        }

        button {
            position: fixed;
            right: 100px;
            bottom: 100px;
            display: none;
        }
    </style>
</head>

<body>
    <h1>hello world</h1>
    <button>⬆</button>

    <script>
        let btn = document.querySelector("button");
        btn.onclick = function () {
            window.scrollTo(0, 0);
        };

        // 防抖
        function debounce(fn) {
            let timer = null;
            function eventFun() {
                if (timer != null) {
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    fn();
                    timer = null;
                }, 500)
            }
            return eventFun;
        }

        // 节流
        function throttle(fn) {
            let mark = true;
            // 直接返回函数也可以
            return function () {
                if (mark) {
                    setTimeout(() => {
                        fn();
                        mark = true;
                    }, 500)
                }
                mark = false;
            }
        }

        window.onscroll = debounce(() => {
            console.log("计数器");
            if (document.documentElement.scrollTop > 0) {
                btn.style.display = "block";
            } else {
                btn.style.display = "none";
            }
        });
    </script>
</body>

</html>

分析：

实现的是一个：网页中的返回顶部功能。

其中使用到了防抖/节流。

通过闭包将防抖/节流算法封装起来。

 input输入框，停下来时才去识别，这也可以使用防抖。

pro1822
关注
专栏目录
JavaScript 计时事件
csbysj2020的博客
08-22 446
JavaScript 中的计时事件是一种重要的功能，它允许开发者创建在特定时间间隔内重复执行的任务。这种功能在许多Web应用中非常有用，比如动画、游戏、定时更新内容等。本文将详细介绍 JavaScript 中的计时事件，包括其工作原理、使用方法，以及在实际开发中的应用场景。
JavaScript计时器
weixin_50738194的博客
09-13 220
JavaScript 2020.9.11 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录JavaScript用JavaScript制作一个计时器，实现开始、暂停、复位功能 用JavaScript制作一个计时器，实现开始、暂停、复位功能 最终效果： <!DOCTYPE html> <html lang="en"> &lt
JavaScript：计时器
最新发布
小谷同学的博客
06-05 1288
JavaScript中我们可以使用计时器做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行！
JS计时器
caoPengFlying的博客
07-30 5008
JS提供了两种计时器的方法 window.setInterval()； 这个方法就是在一个周期内反复执行一直到窗口关闭或者 clearInterval() window.setTimeout(); 延迟执行内容 setInterval()的使用方法： setInterval(code,millisec); code:可以是方法名，如果是方法不要加小括号。同时也可以是字符串
Javascript (计时器）
linlinaitangtang的博客
04-11 810
var timer=setInterval(参数1，参数2）间隔参数2时间,执行一次参数1里的代码。 参数1：待执行的js代码串或调用的函数。 参数2：间隔时间 单位 毫秒。（ms） setInterval("console.log(123)", 1000) 而另外还有一个间隔一段时间后才执行相应代码的方法 setTimeout（）方法 关闭/情书计时器——clearinteral. 字符串（构造函数） var str="";=var str=new string("abc")
javaScript计时器
热门推荐
weixin_52629592的博客
06-14 1万+
Window中为我们提供了两种计时器,即: 定时器setTimeout() 和 延迟计时器setInterval()定时器setTimeout()为一次性计时器,即在规定时间后执行,且只执行一次;而延迟计时器setInterval()可以实现在指定时间内重复执行.1.定时器创建定时器: 注:这里我们使用setInterval()方法之后返回一个timer,timer是该计时器的唯一标识.参数ms即为在ms毫秒之后执行此定时器中的方法.删除定时器: 使用此方法即可以清除计时
小程序DEMO——计时器
03-15
【小程序DEMO——计时器】是一个以编程技术为基础，为用户提供简单计时功能的应用示例。这个DEMO主要展示了如何在小程序环境中实现一个计时器功能，它可以帮助开发者理解和学习小程序开发的基本流程，以及涉及到的...
Js——计时器方法
qq_63654439的博客
03-04 4953
1、setInterval与clearInervar 实现秒表功能 <button class="start">开始</button> <button class="stop">暂停</button> <button class="end">结束</button> <h1 class="time">10:9</h1> <script> let start = docu
JavaScript两种计时器的实例讲解
12-01
在这篇文章中，我们将深入探讨两种计时器——`setInterval()` 和 `setTimeout()`，以及它们在实际编程中的应用。 1. `setInterval()` 计时器： `setInterval()` 方法用于周期性地执行指定的代码，直到 ...
JavaScript——计时器之倒计时
qq_40139513的博客
10-10 543
这是我们平时做游戏时候运用的游戏倒计时样式 下面是代码部分作参考：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> button:hover{ cursor: pointer;
js计时器(开始计时、停止计时、重置)
02-20
计时器的实现，有开始计时、停止计时、重置功能。
Javascript/Jquery——简单定时器的多种实现方法
10-27
在本文中，我们将深入探讨这两种方法以及它们的不同用法，同时还会介绍一个使用 `setTimeout` 的可停止计时器的例子。 ### 1. `setInterval` 方法 `setInterval` 是 JavaScript 的内置函数，用于在指定的时间间隔...
js实现计时器
k0933的博客
12-04 969
【代码】js实现计时器。
JavaScript 计时器
你难忘的
09-24 2103
在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。 计时器类型： 一次性计时器：仅在指定的延迟时间之后触发一次。 间隔性触发计时器：每隔一定的时间间隔就触发一次。 计时器方法： 计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码。 语法: setInterval(代码,交互时间); 参数说明： 1. 代码：要调用的函数或要执行的代码串。 2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。 返回
javascript计时器
gulanga5的博客
04-26 1428
一、计时器： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>0</h1> <h2>10</h2> <script> /** let count = 0;
JavaScript中计时器
weixin_44602430的博客
10-11 241
计时器 一.单次定时: setTimeout() 第一个参数是匿名函数 第二个参数 多少毫秒后去执行 第三 定时器有返回值(返回的是地址) 二.清除单次定时器: clearTimeout 定时器变量名称是定时器地址 三.多次定时器: setInterval 第一个参数是匿名函数 第二个参数是每隔多少毫秒后执行一次 有返回值 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pro1822

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值