JavaScript setInterval() Function Examples

JavaScript's setInterval() function is used to automatically execute tasks based on a timer. setInterval() is a native JavaScript function, very similar to jQuery's setTimeout() function.

BasicsetInterval()Example

setInterval(function() {
      // 每5秒执行一次操作
}, 5000);

Tip: If you dynamically load the image and load the variables from the PHP script, you need to add some kind of random number to the script to force all browsers to refresh. The following code can be used to generate random numbers:

$(document).ready(function() {
    var refreshId = setInterval(function() {
        var r = (-0.5) + (Math.random() * (1000.99));
        $('#img-container').load('images/gallery/best/random.php?' + r);
    }, 5000);
});

Tip: You may also need to use the ajax method instead of the load method to prevent cached AJAX requests. Alternatively, you can add random.php to the top of the header("Cache-Control: no-cache, must-revalidate"); file to prevent browser cache.

JavaScript setIntervalFAQs (FAQs)

What is the difference between

setInterval and setTimeout?

setInterval and setTimeout are both built-in JavaScript functions that are used to execute code after a specified time period. However, they work differently. setInterval will execute the code repeatedly until it is stopped; while setTimeout will execute the code only once after the specified time delay.

How to stop or clear setInterval?

You can use the clearInterval function to stop or clear setInterval. This function requires the ID value returned by the setInterval function as a parameter. Example:

let intervalID = setInterval(myFunction, 3000);
// 清除间隔
clearInterval(intervalID);

After calling clearInterval, myFunction will stop executing every 3 seconds.

Can setInterval be used with arrow functions?

Yes. Arrow functions provide a concise syntax to write function expressions in JavaScript. Example:

setInterval(() => {
  console.log('Hello, World!');
}, 1000);

This code will record "Hello, World!" in the console every second.

How to use setInterval in JavaScript class?

can be used in a class by using the this keyword reference class method. However, you need to bind the setInterval keyword to the class instance, otherwise it will reference the global object. Example: this

class MyClass {
  constructor() {
    this.myMethod = this.myMethod.bind(this);
    setInterval(this.myMethod, 1000);
  }

  myMethod() {
    console.log('Hello, World!');
  }
}

This code will record "Hello, World!" in the console every second.

Can additional parameters be passed to functions in

? setInterval

Yes. After the delayed parameters, any number of parameters can be added to which the function will be passed when the function is called. Example:

setInterval(function(a, b) {
  console.log(a + b);
}, 1000, 'Hello, ', 'World!');

This code will record "Hello, World!" in the console every second.

How to use setInterval with Promise?

can be used with Promise by wrapping setInterval in the Promise constructor. However, remember that setInterval will continue to execute until it is stopped, so you need to provide a condition to parse or reject the promise. Example: setInterval

setInterval(function() {
      // 每5秒执行一次操作
}, 5000);

This code will parse promises after 6 seconds.

What happens if the function executes longer than the

delay time? setInterval

If the function execution time is longer than the

delay time, the next call will be queued and executed immediately after the current call is completed. This can cause function calls to pile up, which can lead to performance issues. setInterval

Can I use

in Node.js? setInterval

Yes, it works the same way as in the browser. Example:

$(document).ready(function() {
    var refreshId = setInterval(function() {
        var r = (-0.5) + (Math.random() * (1000.99));
        $('#img-container').load('images/gallery/best/random.php?' + r);
    }, 5000);
});

This code will record "Hello, Node.js!" in the console every second.

How to use

with setInterval? async/await

can be used with

by wrapping setInterval in a Promise and then processing the promise using async/await syntax. Example: setInterval async/await

This code will record "Hello, async/await!" in the console after 6 seconds.

let intervalID = setInterval(myFunction, 3000);
// 清除间隔
clearInterval(intervalID);

Can I use

with jQuery?

setIntervalYes, you can use it to regularly update a part of a web page, animate elements, or perform any other tasks. Example:

This code will cause the element with ID "myElement" to fade out and then fade in every second.

setInterval(() => {
  console.log('Hello, World!');
}, 1000);

The above is the detailed content of JavaScript setInterval() Function Examples. For more information, please follow other related articles on the PHP Chinese website!