登录
首页 >  文章 >  前端

计时器

时间:2025-02-05 14:15:51 125浏览 收藏

怎么入门文章编程?需要学习哪些知识点?这是新手们刚接触编程时常见的问题;下面golang学习网就来给大家整理分享一些知识点,希望能够给初学者一些帮助。本篇文章就来介绍《计时器》,涉及到,有需要的可以收藏一下

计时器

JavaScript计时器让您能够在指定时间执行代码,或以固定间隔重复执行。主要有两种计时器:setTimeout()setInterval()。两者都用于安排代码在延迟后运行,但行为有所不同。

  1. setTimeout()

setTimeout() 在指定的延迟后仅执行一次函数或代码块。

  • 工作原理: 告诉JavaScript“等待一段时间后,再执行这段代码”。

  • 语法:

setTimeout(function, delay, ...args);
  • 示例:
function sayHello() {
  console.log("Hello, world!");
}

// 3秒后调用 sayHello() (3000毫秒)
setTimeout(sayHello, 3000);

在这个例子中,sayHello 函数会在3秒后执行。setTimeout() 接受两个参数:

  • 要执行的函数 (sayHello)。

  • 延迟时间,单位为毫秒 (3000毫秒 = 3秒)。

  • ...args (可选): 传递给函数的其他参数。

  • 要点:

  • 非阻塞: setTimeout() 不会阻塞其他代码的执行。JavaScript在等待超时期间继续执行其他语句。

  • 毫秒: 延迟以毫秒为单位,最小延迟为1毫秒。

  • 单次执行: 回调函数只会在指定时间后调用一次。

  1. setInterval()

setInterval() 以指定的间隔(毫秒)重复执行代码块或函数,直到手动停止。

  • 工作原理: 告诉JavaScript“每隔一段时间就执行这段代码”。

  • 语法: (语法与setTimeout类似,只是功能不同)

  • 示例:

function sayHelloAgain() {
  console.log("Hello again!");
}

// 每2秒调用 sayHelloAgain() (2000毫秒)
setInterval(sayHelloAgain, 2000);

这里,setInterval() 内部的代码会每2秒执行一次。

  • 要点:

  • 非阻塞: 类似于 setTimeout()setInterval() 也是非阻塞的。浏览器在等待下一个间隔时继续执行其他任务。

  • 重复执行: 与只执行一次的 setTimeout() 不同,setInterval() 会以指定间隔持续执行回调函数。

  • 手动停止: 该函数会持续运行,直到使用 clearInterval() 手动停止。

  1. 清除计时器

您可以使用 clearTimeout()clearInterval() 来停止计时器。

  • 停止 setTimeout() 计时器:

如果想在执行前取消超时,可以使用 clearTimeout()

function sayHello() {
  console.log("Hello, world!");
}
const timeoutId = setTimeout(sayHello, 4000);

// 在执行前停止超时
clearTimeout(timeoutId);
  • 停止 setInterval() 计时器:
const intervalId = setInterval(sayHello, 1000);

// 5秒后停止间隔
setTimeout(() => {
  clearInterval(intervalId);
  console.log("Interval timer stopped");
}, 5000);

这里,我们首先启动一个每秒执行的间隔。然后,5秒后,我们使用 setTimeout()clearInterval(intervalId) 来停止间隔。

关键概念总结:

  • setTimeout():在指定的延迟后执行一次函数。
  • setInterval():以指定的间隔重复执行函数。
  • clearTimeout() / clearInterval():用于取消计时器。
  • 异步特性: 计时器不会阻塞其他代码的执行;它们会被添加到事件队列中,并在调用堆栈为空时执行。
  • 精度: 由于繁重的计算或浏览器限制等因素,计时器的精度无法保证。

今天关于《计时器》的内容就介绍到这里了,是不是学起来一目了然!想要了解更多关于的内容请关注golang学习网公众号!

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>