javascript - 有没有一种方法可以在我的html页面上执行JavaScript/JQuery函数一段指定的时间，然后停止执行？

我正在对网页的背景图像使用波纹效果。就目前而言，这种效果会出现在页面加载中，并在用户移动鼠标光标时在背景中产生波纹。我正在尝试找出在设定的时间（20秒）后停止效果的方法。

我尝试使用setInterval()和clearInterval()，以及将它们组合/嵌套到setTimeout()中。我复习了类似的问题，但是尝试各种解决方案均无效。

我最近的尝试是：

var animateBackground = setInterval(function() {
    $('body').ripples({
     resolution: 1297,
     dropRadius: 10,
     perturbance: 0.04,
     });
   }, 1000);
  setTimeout(function(){
    clearInterval(animateBackground);
  }, 20000);

我是Web设计/编码的新手，非常感谢社区可以提供的任何帮助。

最佳答案

您具有停止setInterval的正确语法。

但是看起来您正在使用的ripples插件不需要设置时间间隔；它会连续运行，直到您调用$(selector).ripples('pause')或$(selector).ripples('destroy')。

https://github.com/sirxemic/jquery.ripples

所以你所需要的就是

$('body').ripples({
   resolution: 1297,
   dropRadius: 10,
   perturbance: 0.04,
});
setTimeout(function(){
  $('body').ripples('pause') // or 'destroy', or 'hide'
}, 20000);