HTML延迟事件触发 # 定时器 || 延时器

小半 • 2023年1月12日下午2:09 • 技术随笔 • 阅读 318

想要让HTML里面的事件等一下再出发，大概可以分成定时器和延时器两种：

两者的区别是：延时器是只触发一次，定时器是每次都延迟这么久才开始执行

通过 JavaScript 使用的有两个关键的方法：

setTimeout(function, milliseconds)

在等待指定的毫秒数后执行函数。

setInterval(function, milliseconds)

等同于 setTimeout()，但持续重复执行该函数。

setTimeout() 和 setInterval() 都属于 window 对象的方法。

延时器

setTimeout() 方法：延时器

window.setTimeout(function, milliseconds);

注意：window.setTimeout() 方法可以不带 window 前缀来编写。

第一个参数是要执行的函数。
第二个参数指示执行之前的毫秒数。
案例演示：单击按钮，等待 3 秒，然后控制台会输出 “Hello”

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">按钮</button>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var btn = document.getElementById("btn");

    btn.onclick = function () {
        // 创建延时器
        var timer = setTimeout(function () {
            console.log("Hello");
        }, 3000);
        
        // 清除延时器
        // clearTimeout(timer);        
    };
</script>
</body>
</html>

定时器

setInterval() 方法：定时器

setInterval() 方法在每个给定的时间间隔重复给定的函数。

window.setInterval(function, milliseconds);

注意：window.setInterval() 方法可以不带 window 前缀来写。

第一个参数是要执行的函数。
第二个参数每个执行之间的时间间隔的长度。
案例演示：单击按钮，每隔一秒向控制台输出 “Hello”

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">按钮</button>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var btn = document.getElementById("btn");

    btn.onclick = function () {
        // 创建定时器
        var timer = setInterval(function () {
            console.log("Hello");
        }, 1000);

        // 清除定时器
        // clearInterval(timer);
    };
</script>
</body>
</html>

通过这些例子之后，就可以进阶一下，比如说，

延时器的使用

有时候不知道页面到底加载多快，就可以延时一下，设个三秒钟的加载页面

就像下面这个例子里面的一样：

Divergence Meter Vistorhttp://www.longsong.xyz/Count_Visitor/