HTML延迟事件触发 # 定时器

2024-07-16 16:29| 来源: 网络整理| 查看: 265

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

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

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

setTimeout(function, milliseconds)

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

setInterval(function, milliseconds)

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

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

延时器

setTimeout() 方法：延时器

window.setTimeout(function, milliseconds);

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

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

按钮 var btn = document.getElementById("btn"); btn.onclick = function () { // 创建延时器 var timer = setTimeout(function () { console.log("Hello"); }, 3000); // 清除延时器 // clearTimeout(timer); };

定时器

setInterval() 方法：定时器

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

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

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

按钮 var btn = document.getElementById("btn"); btn.onclick = function () { // 创建定时器 var timer = setInterval(function () { console.log("Hello"); }, 1000); // 清除定时器 // clearInterval(timer); };

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

延时器的使用

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

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

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

定时器的使用可以比如每一秒刷新一次，显示当前时间之类的，效果见下：

Divergence Meter Timehttp://www.longsong.xyz/Time_Machine/下载源码

https://github.com/longsongline/Steins-Gate-Divergence-Meter-Clock-VisitorCounterhttps://github.com/longsongline/Steins-Gate-Divergence-Meter-Clock-VisitorCounter

【本文地址】

公司简介

联系我们