如何在JavaScript中使用setTimeout()方法,在5分钟或更短的时间内解释。

作为一个网页开发者,您的网页应用程序的响应性和互动性是用户体验的关键组成部分。为了增强应用程序的用户体验,您需要添加动态行为,并在应用程序中执行某些代码片段的时间上拥有控制权。

settimeout()方法就是一个非常好用的工具,它允许您安排代码的执行时间,编排动画,创建定时器,并管理应用程序中的异步操作。

因此,了解settimeout()的语法、如何使用它以及如何在下一个项目中应用它是很重要的。本文将探讨这些内容,并为您提供正确的知识,让您能够充分利用settimeout()方法。

javascript的settimeout函数

settimeout()是一个绑定在window对象上的全局方法,用于在一定时间后执行一个函数或一段代码。例如,如果您想要在四秒后执行一个函数,就可以使用settimeout()方法来实现这个目标。

当使用settimeout()时,它会设置一个计时器,从您指定的时间开始倒计时,然后执行您传递给它的函数或代码。

settimeout()是一个全局方法,这意味着它在全局对象中可以找到,因此无需导入即可在任何地方使用。全局对象由浏览器中的文档对象模型(dom)提供,并通过属性名window进行引用。

因此,我们可以使用window.settimeout()或者简单地使用settimeout(),因为全局对象window会被隐式地引用。window.settimeout()和settimeout()没有区别。

settimeout()的通用语法如下:

settimeout(function, delay)
  • function – 这是在给定时间后要执行的函数。
  • delay – 要延迟的时间,以毫秒为单位。1秒等于1000毫秒。

使用settimeout()时,您指定的延迟应该是一个数值,以避免出现意外的结果。延迟参数是可选的。如果没有指定,它默认为0,传递的函数将立即执行。

settimeout()返回一个称为timeoutid的唯一标识符,它是一个正整数,用于唯一标识调用settimeout()方法时创建的计时器。

还需要注意的是,settimeout()是异步的。它的计时器不会停止调用堆栈中的其他函数的执行。

如何使用settimeout()

让我们看一些使用settimeout()方法的示例:

// 使用函数声明的settimeout()
settimeout(function () {
  console.log("3秒后的世界,你好");
}, 3000)

// 使用箭头函数的settimeout()
settimeout(() => {
  console.log("1秒后的世界,你好")
}, 1000)

输出:

1秒后的世界,你好
3秒后的世界,你好

在上面的输出中,第二个 settimeout() 首先记录其输出,因为它的延迟更短,只有1秒,而第一个延迟3秒。如前所述,settimeout() 是异步的。当调用延迟为3秒的第一个 settimeout() 时,会启动一个3秒的定时器,但不会停止程序中其他代码的执行。

当方法从3倒数时,调用堆栈中的其余代码被执行。在这个例子中,下一段代码是延迟1秒的第二个 settimeout()。由于它的延迟时间更短,这就是为什么它的代码在第一个 settimeout() 之前执行的原因。

使用 settimeout() 时,不必直接在 settimeout() 方法中编写函数。

// 函数声明
function greet() {
  console.log("hello there!")
}

// 将函数存储在变量中 - 函数表达式
const speak = function () {
  console.log("how are you doing?")
}

// 使用箭头函数
const signoff = () => {
  console.log("yours sincerely: yaoweibin:)")
}

// 将函数引用传递给 settimeout()
settimeout(greet, 1000)
settimeout(speak, 2000)
settimeout(signoff, 3000)

输出:

hello there!
how are you doing?
yours sincerely: yaoweibin:)

当我们在其他地方定义一个方法,然后将其传递给 settimeout(),我们传递给 settimeout() 的是要在给定时间后执行的函数的引用。

settimeout() 带有附加参数

settimeout() 有一种替代语法,允许您将附加参数传递给 settimeout() 方法。这些参数将在延迟后执行的函数中使用。

语法如下:

settimeout(functionref, delay, param1, param2, /* …, */ paramn)

您可以根据函数引用所需的参数数量传递任意数量的附加参数。

考虑下面的函数:

function greet (name, message) {
  console.log(`hello ${name}, ${message}`)
}

如果您想在一定时间后使用 settimeout() 执行上述函数,可以像下面这样做:

// 使用附加参数的 settimeout()
function greet (name, message) {
  console.log(`hello ${name}, ${message}`)
}

settimeout(greet, 2000, "john", "happy coding!");

输出:

hello john, happy coding!

请记住,如果我们在其他地方定义一个函数,然后将其传递给 settimeout(),我们传递的只是函数的引用。在上面的示例中,我们传递的是 greet 的引用,而不是 greet(),后者调用函数。我们希望 settimeout() 使用其引用调用函数。

这就是为什么我们不能直接传入附加参数,如下所示:

// 这会导致 err_invalid_arg_type 错误
settimeout(greet("john", "happy coding!"), 2000);

在上面的代码中,greet函数立即执行,而不是等待2秒钟的时间。然后抛出错误。执行代码的结果如下所示:

在上面的代码中,greet函数立即执行,而不是等待2秒钟的时间。然后抛出错误。执行代码的结果如下所示:

取消settimeout()

我们可以通过使用cleartimeout()方法来阻止使用settimeout()方法安排的函数的执行。如果我们已经设置了一个在一定时间后执行的函数,但是我们不希望在满足某些条件或条件发生变化后执行该函数,这种情况可能是必要的。

cleartimeout()方法的语法如下所示:

cleartimeout(timeoutid)

cleartimeout()接受一个参数timeoutid,该参数是settimeout()方法返回的唯一标识符。

考虑下面的例子:

function text() {
  console.log("this is not going to be printed")
}

function greet() {
  console.log("hello after 5 seconds")
}

// schedule the function text() to be executed after 3 seconds
const timeoutid = settimeout(text, 3000);

// cancelt text() timeout time using cleartimeout()
cleartimeout(timeoutid)
console.log(`${timeoutid} cleared out`)

// schedule the function greet() to be executed after 5 seconds
settimeout(greet, 5000)

输出:

2 cleared out
hello after 5 seconds

由于使用了cleartimeout()来取消timeout,因此函数text()不会被执行,从而阻止了它的执行。

使用settimeout()的优点

使用settimeout()方法的一些优点包括:

  • 延迟代码执行 – settimeout() 的主要功能是允许开发人员延迟代码的执行。这是在创建动画、管理定时事件以及控制异步代码流程时至关重要的功能。settimeout() 还可以释放主线程以运行其他代码。
  • 计时器实现 – settimeout() 提供了一种在应用程序中实现简单计时器的简单方法,无需使用外部库或执行复杂的日期操作。
  • 节流和防抖 – settimeout() 可以用于限制调用某些函数或执行某些操作的次数,特别是在滚动或输入等事件期间。使用防抖时,您的应用程序在调用函数之前等待一定的时间。节流限制在给定时间段内进行的函数调用次数。settimeout() 可用于实现这两种功能。
  • 增强用户体验 – settimeout() 允许您通过控制某些操作发生的时间来增强应用程序的用户体验,例如在显示通知、警报、弹出消息和动画时。这有助于防止用户信息过载,从而提升用户体验。
  • 提高web性能 – settimeout() 可以通过将复杂问题分解为更简单的小问题来提高web应用程序的性能和整体响应能力。这些较小的问题可以在 settimeout() 内处理,允许代码的其他部分继续执行,从而不影响应用程序的性能或响应能力。

很显然,使用 javascript 构建应用程序时,settimeout() 既强大又非常有用。

使用settimeout()的缺点

使用 settimeout() 的一些缺点包括:

  • 不准确的定时 – settimeout() 无法保证函数被调用或操作执行的确切时间。有时其他编写不良的代码会导致竞争条件,影响 settimeout() 的操作。当您使用多个重叠的 settimeout() 时,如果涉及其他异步操作,无法始终确保执行顺序
  • 回调地狱 – 如果您有太多嵌套的 settimeout() 调用,您的代码会变得难以阅读和调试。在应用程序中使用太多的 settimeout() 也可能导致内存问题,如果未正确处理 settimeout() 调用。

虽然 settimeout() 可以避免其使用时的一些挑战,但通过遵循最佳实践和良好的编码习惯,您可以在应用程序中将这些缺点最小化或完全避免。

结论

settimeout() 方法可用于延迟函数的执行。settimeout() 常用于动画、延迟加载内容和处理请求的超时。

例如,您可以使用 settimeout() 在网页上显示警报。虽然 settimeout() 不能保证函数执行的确切时间,但它保证在设定的延迟后执行。

您还可以探索 javascript orm 平台以进行高效编码。

类似文章