HTML DOM setTimeout() 方法
封面图
•
2025-12-19
•
JavaScript
247
1
1
0
在 HTML 和 JavaScript 中,`setTimeout()` 是一个非常常用的函数,用于**延迟执行某段代码**。它属于 **JavaScript 的全局函数**,而不是 HTML DOM 的方法(尽管它常用于操作 DOM)。 --- ## ✅ 一、`setTimeout()` 简介 `setTimeout()` 的作用是:**在指定的毫秒数之后,执行一次指定的函数或代码块**。 ### 语法: ```javascript setTimeout(function, milliseconds); ``` - `function`:要执行的函数或代码字符串。 - `milliseconds`:等待的时间,单位是毫秒(1000 毫秒 = 1 秒)。 --- ## ✅ 二、使用示例 ### 示例 1:简单调用 ```javascript setTimeout(function() { alert("3 秒后显示这个提示框!"); }, 3000); ``` ### 示例 2:直接写代码(不推荐) ```javascript setTimeout("alert('3 秒后显示这个提示框!');", 3000); ``` > ⚠️ 注意:不建议使用字符串方式,因为安全性差,难以调试。 --- ## ✅ 三、返回值 `setTimeout()` 返回一个 **定时器 ID**,可以用来取消该定时器。 ```javascript let timerId = setTimeout(() => { console.log("这会执行"); }, 2000); // 取消定时器 clearTimeout(timerId); ``` --- ## ✅ 四、与 HTML DOM 的关系 虽然 `setTimeout()` 不是 HTML DOM 的方法,但它经常被用来**操作 DOM 元素**,比如: ### 示例:3 秒后改变元素内容 ```html <!DOCTYPE html> <html> <body> <p id="demo">初始内容</p> <script> setTimeout(function() { document.getElementById("demo").innerHTML = "3 秒后内容已更改!"; }, 3000); </script> </body> </html> ``` --- ## ✅ 五、常见用途 - 延迟加载数据 - 实现动画效果 - 防抖/节流 - 延迟执行某些操作(如表单提交后的跳转) --- ## ✅ 六、注意事项 - `setTimeout()` 不是“精确”的定时器,实际执行时间可能略大于设定时间。 - 如果页面关闭或刷新,所有 `setTimeout()` 会被清除。 - 多个 `setTimeout()` 之间可能会有重叠或冲突,注意管理。 --- ## ✅ 七、相关函数 | 函数 | 说明 | |--------------|------------------------------| | `setTimeout()` | 延迟执行一次函数 | | `setInterval()`| 重复执行函数(每隔一段时间) | | `clearTimeout()` | 清除由 `setTimeout()` 设置的定时器 | | `clearInterval()` | 清除由 `setInterval()` 设置的定时器 | --- 如果你需要更具体的例子(如结合 DOM 操作、动画等),欢迎继续提问!
上一篇:
setInterval() 方法
下一篇:
URL加随机数的作用
标题录入,一次不能超过6条
留言
评论