一篇文章带你了解JavaScript时间

开发 前端
本文基于JavaScript基础,介绍了JavaScript 时间事件 setTimeout(),setInterval() 方法,这两种方法的语法,实际用法和区别。以及如何去启动定时器,停止定时器,通过详细案例分析。运行效果图的展示。进行了详细的讲解。代码很简单,希望能够帮助你学习。

[[400056]]

一、前言

setTimeout(function, milliseconds) 在等待指定的毫秒数后执行函数。setInterval(function, milliseconds) setTimeout()相同,但会重复执行。

二、时间事件

窗口对象允许在指定的时间间隔执行代码。时间间隔称为定时事件。

1. setTimeout() 方法

  1. window.setTimeout(function, milliseconds); 

window.setTimeout() 方法可以不用窗口window前缀编写。

第一个参数是要执行的函数,第二个参数指示执行前的毫秒数。

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4. <meta charset="UTF-8"
  5. <title>项目</title> 
  6. </head> 
  7. <body style="background-color: aqua;\"
  8.  
  9. <p>点击"试试". 等3秒,这个页面将提示"Hello".</p> 
  10.  
  11. <button onclick="setTimeout(myFunction, 3000);">试试</button> 
  12.  
  13. <script> 
  14. function myFunction() { 
  15. alert('Hello'); 
  16. </script> 
  17.  
  18.  
  19. </body> 
  20. </html> 

如何停止执行?

clearTimeout() 方法停止指定的函数setTimeout()的执行。

语法:

  1. window.clearTimeout(timeoutVariable) 

window.clearTimeout() 方法可以不用窗口window前缀编写。

clearTimeout() 方法使用setTimeout()返回的变量。

  1. myVar = setTimeout(function, milliseconds); 
  2. clearTimeout(myVar); 

如果该函数尚未被执行,则可以通过调用 clearTimeout() 方法:

例:

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4. <meta charset="UTF-8"
  5. <title>项目</title> 
  6. </head> 
  7. <body style="background-color: aqua;"
  8.  
  9. <p>点击 "试试". 等3秒。这个页面将出现一个"Hello".</p> 
  10. <p>单击“停止”以阻止第一个功能执行。</p> 
  11. <p>(您必须在3秒钟之前单击“停止”。)</p> 
  12.  
  13. <button onclick="myVar = setTimeout(myFunction, 3000)">试试</button> 
  14.  
  15. <button onclick="clearTimeout(myVar)">停止</button> 
  16.  
  17. <script> 
  18. function myFunction() { 
  19. alert("Hello"); 
  20. </script> 
  21.  
  22. </body> 
  23. </html> 

2. setInterval() 方法

setInterval() 方法在给定的时间间隔内重复给定的函数。

  1. window.setInterval(function, milliseconds); 

window.setInterval() 方法可以不用窗口window前缀编写。

第一个参数是要执行的函数。

第二个参数指示每次执行之间的时间间隔的长度。

例:

执行一个称为“myTimer”的函数,每隔二秒(像一个数字表)。

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4. <meta charset="UTF-8"
  5. <title>项目</title> 
  6. </head> 
  7. <body style="background-color: aqua;"
  8.  
  9. <p>A script on this page starts this clock:</p> 
  10.  
  11. <p id="demo"></p> 
  12.  
  13. <script> 
  14. var myVar = setInterval(myTimer, 1000); 
  15.  
  16. function myTimer() { 
  17. var d = new Date(); 
  18. document.getElementById("demo").innerHTML = d.toLocaleTimeString(); 
  19. </script> 
  20.  
  21.  
  22. </body> 
  23. </html> 

 

(一秒钟等于1000毫秒)。

如何停止执行?

clearInterval() 方法停止指定的函数setInterval()的执行。

  1. window.clearInterval(timerVariable) 

window.clearInterval() 方法可以不用窗口window前缀编写。

clearInterval() 方法使用从setInterval()返回的变量 。

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3.   <head> 
  4.     <meta charset="UTF-8"
  5.     <title>项目</title> 
  6.   </head> 
  7.   <body style="background-color: aqua;"
  8.  
  9.     <p>A script on this page starts this clock:</p> 
  10.  
  11.     <p id="demo"></p> 
  12.  
  13.     <button onclick="clearInterval(myVar)">停止</button> 
  14.  
  15.     <script> 
  16.       var myVar = setInterval(myTimer, 1000); 
  17.  
  18.       function myTimer() { 
  19.         var d = new Date(); 
  20.         document.getElementById("demo").innerHTML = d.toLocaleTimeString(); 
  21.       } 
  22. </script> 
  23.  
  24.  
  25.   </body> 
  26. </html> 

代码解析:

运行效果:

三、总结

本文基于JavaScript基础,介绍了JavaScript 时间事件 setTimeout(),setInterval() 方法,这两种方法的语法,实际用法和区别。以及如何去启动定时器,停止定时器,通过详细案例分析。运行效果图的展示。进行了详细的讲解。代码很简单,希望能够帮助你学习。

希望大家可以根据文章的内容,积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

使用JavaScript 语言,方便大家更好理解,希望对大家的学习有帮助。

本文转载自微信公众号「前端进阶学习交流」,可以通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。

 

责任编辑:姜华 来源: 前端进阶学习交流
相关推荐

2021-01-29 18:41:16

JavaScript函数语法

2020-11-10 10:48:10

JavaScript属性对象

2021-02-02 18:39:05

JavaScript

2021-06-04 09:56:01

JavaScript 前端switch

2024-01-30 13:47:45

2023-09-06 14:57:46

JavaScript编程语言

2021-01-26 23:46:32

JavaScript数据结构前端

2021-06-24 09:05:08

JavaScript日期前端

2024-04-19 14:23:52

SwitchJavaScript开发

2023-07-30 15:18:54

JavaScript属性

2021-03-09 14:04:01

JavaScriptCookie数据

2021-03-05 18:04:15

JavaScript循环代码

2023-07-25 16:06:57

JavaScript对象

2023-07-14 14:56:47

JavaScriptwindow

2023-06-01 17:10:12

HTMLJavaScript

2021-04-20 11:20:24

Java开发运算符

2021-11-26 11:10:07

JavaScript 节点导航

2021-05-07 14:17:01

JavaScript元素网页

2024-07-02 14:14:18

2023-06-06 15:45:40

JavaScript数组
点赞
收藏

51CTO技术栈公众号