当前位置:首页 > JavaScript

js实现settimeout

2026-03-02 08:01:23JavaScript

使用 setTimeout 实现延时执行

setTimeout 是 JavaScript 中用于在指定时间后执行一次函数的方法。其基本语法如下:

setTimeout(function, delay, [arg1], [arg2], ...);
  • function:需要延时执行的函数。
  • delay:延时时间(毫秒)。
  • arg1, arg2:可选参数,传递给函数的额外参数。

基本用法示例

以下代码会在 2 秒后打印 "Hello, World!":

setTimeout(() => {
  console.log("Hello, World!");
}, 2000);

传递参数给回调函数

可以通过 setTimeout 的额外参数传递数据给回调函数:

setTimeout((message) => {
  console.log(message);
}, 1000, "This is a message");

清除 setTimeout

setTimeout 返回一个计时器 ID,可以通过 clearTimeout 取消延时执行:

const timerId = setTimeout(() => {
  console.log("This will not run");
}, 3000);

clearTimeout(timerId);

使用箭头函数简化

箭头函数可以简化回调的写法:

setTimeout(() => console.log("Simplified"), 1500);

递归实现周期性任务

虽然 setInterval 更适合周期性任务,但 setTimeout 也可以通过递归实现类似效果:

js实现settimeout

function repeat() {
  console.log("Recursive timeout");
  setTimeout(repeat, 1000);
}
setTimeout(repeat, 1000);

注意事项

  • 延时时间只是最小值,实际执行时间可能因浏览器繁忙而延迟。
  • 避免在回调中执行耗时操作,以免阻塞主线程。
  • 在单页应用切换时,未执行的 setTimeout 仍会继续运行,必要时需清除。

标签: jssettimeout
分享给朋友:

相关文章

js实现论坛

js实现论坛

实现论坛的基本功能 使用JavaScript实现一个论坛需要结合前端和后端技术。前端可以使用React、Vue或Angular等框架,后端可以选择Node.js配合Express或Koa框架。数据库可…

vue实现settimeout

vue实现settimeout

Vue 中使用 setTimeout 在 Vue 中实现 setTimeout 可以通过以下方法完成。setTimeout 是 JavaScript 的原生方法,用于在指定时间后执行回调函数。 基本…

js实现下拉菜单

js实现下拉菜单

使用HTML和CSS创建基础结构 HTML部分需要包含一个触发下拉的按钮和隐藏的下拉菜单内容: <div class="dropdown"> <button class="dr…

js分页实现

js分页实现

分页的基本原理 分页的核心是通过计算当前页码和数据偏移量,从服务器或本地数据中截取对应范围的数据进行展示。通常需要以下参数:当前页码(currentPage)、每页条数(pageSize)、总数据量(…

实现继承js

实现继承js

实现继承的方式 在JavaScript中,实现继承可以通过多种方式完成,每种方式都有其优缺点。以下是几种常见的实现继承的方法: 原型链继承 原型链继承是最基本的继承方式,通过将子类的原型指向父类的实…

js 实现图片 放大

js 实现图片 放大

使用 CSS transform 实现图片放大 通过 CSS 的 transform: scale() 属性可以实现图片的平滑放大效果。结合 JavaScript 监听鼠标事件控制放大状态: con…