设置函数在特定时间执行 JavaScript

有时候，在 JavaScript 中，我们需要在特定时间执行某个函数，比如定时器、动画效果、倒计时等等。本文将介绍如何使用 JavaScript 来设置函数在特定时间执行。

setTimeout() 函数

使用 setTimeout() 函数可以让一个函数在一定时间后执行。它需要传入两个参数：一个是函数，另一个是时间（单位是毫秒）。

setTimeout(function() {
  console.log('Hello, world!');
}, 3000);

上面的代码会在 3 秒后执行 console.log('Hello, world!')。

setInterval() 函数

setInterval() 函数可以让一个函数按照指定的时间间隔重复执行。同样需要传入两个参数：一个是函数，另一个是时间（单位是毫秒）。

setInterval(function() {
  console.log('Hello, world!');
}, 1000);

上面的代码会每隔一秒钟执行一次 console.log('Hello, world!')。

clearTimeout() 和 clearInterval() 函数

我们可以使用 clearTimeout() 和 clearInterval() 函数来取消 setTimeout() 和 setInterval() 函数的执行。

var timeoutId = setTimeout(function() {
  console.log('Hello, world!');
}, 3000);

clearTimeout(timeoutId);

上面的代码会在 3 秒后取消函数的执行。

var intervalId = setInterval(function() {
  console.log('Hello, world!');
}, 1000);

clearInterval(intervalId);

上面的代码会每隔一秒钟执行一次函数，但是在取消之前只会执行一次。

requestAnimationFrame() 函数

requestAnimationFrame() 函数可以让一个函数在下一次浏览器重新绘制之前执行。这可以让网页的动画效果更流畅。

requestAnimationFrame(function() {
  console.log('Hello, world!');
});

上面的代码会在下一次浏览器重新绘制之前执行 console.log('Hello, world!')。

小结

本文介绍了如何使用 JavaScript 来设置函数在特定时间执行。我们可以使用 setTimeout() 和 setInterval() 函数来实现定时器和动画效果，使用 clearTimeout() 和 clearInterval() 函数来取消定时器和动画效果的执行，使用 requestAnimationFrame() 函数来让网页的动画效果更流畅。