jquery 延时函数

jquery 延时函数

当然,以下是关于 jQuery 延时函数的详细文档。

jQuery 延时函数

在 jQuery 中,可以使用 setTimeout 和 setInterval 函数来实现延时操作,也可以使用 jQuery 自带的 .delay() 方法来延迟动画的执行。下面分别介绍这几种方法的使用场景和示例代码。

使用 setTimeout

setTimeout 是 JavaScript 原生的延时函数,可以在指定的时间后执行一次某个函数。

语法

setTimeout(function, delay);
  • function: 要执行的函数。
  • delay: 延迟的时间(以毫秒为单位)。

示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery setTimeout Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $("#myButton").click(function() { setTimeout(function() { alert("This message is shown after 2 seconds!"); }, 2000); // 2000 milliseconds = 2 seconds }); }); </script> </head> <body> <button id="myButton">Click me!</button> </body> </html>

使用 setInterval

setInterval 也是 JavaScript 原生的函数,它会在每隔指定的时间重复执行某个函数。

语法

setInterval(function, interval);
  • function: 要执行的函数。
  • interval: 时间间隔(以毫秒为单位)。

示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery setInterval Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { setInterval(function() { console.log("This message is logged every 3 seconds!"); }, 3000); // 3000 milliseconds = 3 seconds }); </script> </head> <body> </body> </html>

使用 .delay()

.delay() 是 jQuery 动画队列中的一个方法,用于延迟后续动画的执行。注意,这个方法仅对通过 jQuery 生成的动画有效。

语法

$(selector).delay(duration[, queueName]);
  • duration: 延迟的时间(以毫秒为单位)。
  • queueName(可选):动画队列的名称。默认是 "fx"。

示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery .delay() Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <style> #box { width: 100px; height: 100px; background-color: red; position: relative; } </style> <script> $(document).ready(function() { $("#animateButton").click(function() { $("#box") .hide("slide", { direction: "up" }, 1000) .delay(2000) // Delay for 2 seconds .show("slide", { direction: "down" }, 1000); }); }); </script> </head> <body> <div id="box"></div> <button id="animateButton">Animate Box</button> </body> </html>

在这个例子中,点击按钮后,盒子会先向上滑动隐藏,然后延迟 2 秒后再向下滑动显示。

总结

  • setTimeout 用于在指定时间后执行一次某个函数。
  • setInterval 用于每隔指定时间重复执行某个函数。
  • .delay() 用于延迟 jQuery 动画队列中的后续动画。

希望这些示例能帮助你理解如何在 jQuery 中使用延时函数!