如何在设定的时间间隔 JS 之后执行一个函数 - Javascript

在开发Web应用时，我们常常需要实现一个函数在一定的时间间隔之后自动执行，这在实现一些交互特效、轮播图等功能时非常常见。Javascript 提供了一些方法来实现这个功能，本篇文章将会介绍这些方法。

一、setTimeout()

setTimeout() 方法可以用来延迟一定时间后执行一个函数。其语法如下：

setTimeout(function, milliseconds);

其中，第一个参数为一个回调函数，第二个参数为延迟的时间，单位是毫秒。

例如，下面的代码将会等待5秒钟后，弹出一个消息框：

setTimeout(function() {
   alert('Hello, World!');
}, 5000);

二、setInterval()

setInterval() 方法可以用来定时执行一个函数。其语法如下：

setInterval(function, milliseconds);

其中，第一个参数为一个回调函数，第二个参数为定时的时间间隔，单位是毫秒。

例如，下面的代码将会每隔2秒钟执行一次回调函数：

setInterval(function() {
   console.log('Hello, World!');
}, 2000);

需要注意的是，setInterval() 方法将会一直执行下去，直到页面关闭或者使用 clearInterval() 方法来停止它。

三、clearTimeout() 和 clearInterval()

如果我们不希望 setTimeout() 或 setInterval() 执行或者取消已经设置的定时器，可以使用 clearTimeout() 和 clearInterval() 方法。

例如，下面的代码将会在5秒钟之后停止定时器：

var timer = setTimeout(function() {
    console.log('Hello, World!');
}, 5000);
clearTimeout(timer);

下面的代码将会每隔2秒钟执行一次回调函数，但是只执行10次：

var count = 0;
var timer = setInterval(function() {
    console.log('Hello, World!');
    count++;
    if(count >= 10) {
        clearInterval(timer);
    }
}, 2000);

结论

以上就是如何在设定的时间间隔 JS 之后执行一个函数的方法，开发 Web 应用时可以根据需求选择适合的方法来实现这个功能。在使用定时器时，一定要注意使用 clearTimeout() 和 clearInterval() 方法来取消已经设置的定时器，避免对性能产生影响。

参考资料

• setTimeout() - MDN
• setInterval() - MDN
• clearTimeout() - MDN
• clearInterval() - MDN