Javascript setInterval()

x33g5p2x  于2022-05-16 转载在 Java  
字(2.4k)|赞(0)|评价(0)|浏览(313)

在本教程中,您将借助示例了解 JavaScript setInterval() 方法。
    在 JavaScript 中,可以在指定的时间间隔内执行一段代码。这些时间间隔称为定时事件。
    有两种方法可以在特定时间间隔执行代码。他们是:

  • setInterval()
  • setTimeout()

在本教程中,您将了解 setInterval() 方法。

JavaScript setInterval()

setInterval() 方法在每个给定的计时事件中重复一个代码块。
    JavaScript setInterval 常用的语法是:

  1. setInterval(function, milliseconds);

它的参数是:

  • function - 包含代码块的函数
  • milliseconds - 函数执行之间的时间间隔

setInterval() 方法返回一个正整数的intervalID 。

示例 1:每 1 秒显示一次文本
  1. // program to display a text using setInterval method
  2. function greet() {
  3. console.log('Hello world');
  4. }
  5. setInterval(greet, 1000);

输出

  1. Hello world
  2. Hello world
  3. Hello world
  4. Hello world
  5. Hello world
  6. ....

在上面的程序中,setInterval() 方法每1000毫秒(1秒)调用一次 greet() 函数。
    因此,程序每1秒显示一次文本 Hello world。
    注意:当你想多次重复一段代码时,setInterval() 方法很有用。例如,以固定的间隔显示消息。

示例 2:每 5 秒显示一次时间
  1. // program to display time every 5 seconds
  2. function showTime() {
  3. // return new date and time
  4. let dateTime= new Date();
  5. // return the time
  6. let time = dateTime.toLocaleTimeString();
  7. console.log(time)
  8. }
  9. let display = setInterval(showTime, 5000);

输出

  1. "5:15:28 PM"
  2. "5:15:33 PM"
  3. "5:15:38 PM"
  4. ....

上述程序每5秒显示一次当前时间。
    new Date() 提供当前日期和时间。toLocaleTimeString() 返回当前时间。要了解更多关于日期和时间的信息,请访问 JavaScript Date and Time

JavaScript clearInterval()

正如您在上面的示例中所看到的,程序在每个指定的时间间隔执行一段代码。如果要停止此函数调用,则可以使用 clearInterval() 方法。
    clearInterval() 方法的语法是:

  1. clearInterval(intervalID);

这里,intervalID 是 setInterval() 方法的返回值。

示例 3:使用 clearInterval() 方法
  1. // program to stop the setInterval() method after five times
  2. let count = 0;
  3. // function creation
  4. let interval = setInterval(function(){
  5. // increasing the count by 1
  6. count += 1;
  7. // when count equals to 5, stop the function
  8. if(count === 5){
  9. clearInterval(interval);
  10. }
  11. // display the current time
  12. let dateTime= new Date();
  13. let time = dateTime.toLocaleTimeString();
  14. console.log(time);
  15. }, 2000);

输出

  1. 4:47:41 PM
  2. 4:47:43 PM
  3. 4:47:45 PM
  4. 4:47:47 PM
  5. 4:47:49 PM

在上述程序中,setInterval() 方法用于每2秒显示一次当前时间。该方法在5次 clearInterval() 后停止函数调用。
    您还可以将其他参数传递给 setInterval() 方法。语法是:

  1. setInterval(function, milliseconds, parameter1, ....paramenterN);

当您向 setInterval() 方法传递附加参数时,这些参数(parameter1、parameter2等)将被传递给指定的 function。
    例如,

  1. // program to display a name
  2. function greet(name, lastName) {
  3. console.log('Hello' + ' ' + name + ' ' + lastName);
  4. }
  5. // passing argument to setInterval
  6. setInterval(greet, 1000, 'John', 'Doe');

输出

  1. Hello John Doe
  2. Hello John Doe
  3. Hello John Doe
  4. ....

在上面的程序中,两个参数 John 和 Doe 被传递给 setInterval() 方法。这两个参数是传递给函数的参数,该函数在 setInterval() 方法中定义(这里是 greet() 函数)。
    注意:如果只需要执行一次函数,最好使用 setTimeout() 方法。

上一教程 :JS async/await                                          下一教程 :JS JSON

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/setInterval

相关文章

最新文章

更多