Is there a way to execute a JavaScript/JQuery function on my html page for a specified amount of time then stop the execution?

Question

I am employing a ripple effect on a background image of a web page. As it sits right now, the effect is present on page load and creates ripples in the background as a user moves the mouse cursor. I am trying to figure out a way to stop the effect after a set amount of time (20s).

I have tried utilizing the setInterval() and clearInterval(), as well as combining/nesting these into a setTimeout(). I reviewed a similar question but attempts at the various solutions did not work.

My most recent attempt was:

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

I am relatively new into web design/coding, and really appreciate any help the community can provide.

A quick housekeeping note: please don't post an answer as part of the question text; that makes things potentially confusing for future users. You can instead post your own separate answer (even on your own question) to supplement or improve on existing answers. — Daniel Beck
– Daniel Beck, Commented Apr 19, 2019 at 17:27
Roger that, added as an answer as suggested. I appreciate the feedback. — Cam Edwards
– Cam Edwards, Commented Apr 19, 2019 at 18:34

Daniel Beck · Accepted Answer · 2019-04-19 17:25:20Z

2

You have the correct syntax for stopping a setInterval.

But it looks like that ripples plugin you're using doesn't need to be set on an interval; it runs continuously until you call $(selector).ripples('pause') or $(selector).ripples('destroy').

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

So all you would need is

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

edited Apr 19, 2019 at 17:25

answered Apr 19, 2019 at 16:45

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cam Edwards Over a year ago

Very good catch, and shame on me for trying to solve it while forgetting to double check usage documentation. I am marking this as answered, thank you for the swift response!

Daniel Beck Over a year ago

No worries, glad to help!

Cam Edwards · Accepted Answer · 2019-04-19 18:33:42Z

1

This question has been successfully answered, and I provide the following update for clarity in the future if this question gets revisited:

In case anyone else ends up at this question, I noticed using $('body').ripples('hide') works nicely as well, and instead of freezing the play state with whatever ripples are still present, it clears the effect from the screen and returns the background to a static image.

Here is the final version of the working script.

<script>
    $('body').ripples({
     resolution: 1297,
     dropRadius: 10,
     perturbance: 0.04,
     });

  setTimeout(function(){
    $('body').ripples('hide');
  }, 20000);
 </script>

answered Apr 19, 2019 at 18:33

Cam Edwards

257 bronze badges

Collectives™ on Stack Overflow

Is there a way to execute a JavaScript/JQuery function on my html page for a specified amount of time then stop the execution?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related