jQuery - re-execute a function on button click

Question

I have a pretty unique situation where I need a bunch of jQuery code to re-execute on a button click. The added complications are:

I can't allow the browser window to refresh
All the code is within a setTimeout() parameter - not sure if this really matters

I can't wrap the code inside a click event as it needs to run automatically on first opening or refresh of the page. To add a bit of context I've mocked up the following:

 setTimeout(function() {
     // all the scripts that need to run
 }, 2500);

 $('.btn').click(function() {
     // re-run the above code without refreshing window or browser
 });

Is there a way to re-run the code on a button click in this context?

Possible duplicate of How to write a reusable jquery click function? — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Oct 5, 2016 at 11:47

Carcigenicate · Accepted Answer · 2016-10-05 11:54:32Z

2

This is actually a fairly common issue.

Make a function that contains the code you need to run in both places, and call the function from the setTimeout and onclick handler:

function someCode () {
    // Your code here
} 

setTimeout (someCode, 2500);

$('.btn').click(someCode);

When in doubt, make a function.

edited Oct 5, 2016 at 11:54

answered Oct 5, 2016 at 11:35

Carcigenicate

46.6k12 gold badges81 silver badges134 bronze badges

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

Comments

hairmot · Accepted Answer · 2016-10-05 11:35:56Z

2

put all your code that needs running in a function of its own and call the function in both places

function myFunc()
{
    // all the scripts that need to run
}

setTimeout(function() {
     myFunc();
 }, 2500);

 $('.btn').click(function() {
     myFunc();
 });

answered Oct 5, 2016 at 11:35

hairmot

2,9551 gold badge16 silver badges26 bronze badges

2 Comments

synthet1c Over a year ago

You don't actually need to wrap myFunc in a function, you can simply pass in the function by reference to both the timeout and the click functions.

Andyjm Over a year ago

Had to choose the answer that came first but this is also a perfect solution so thanks!

Stewartside · Accepted Answer · 2016-10-05 11:37:09Z

1

What you can do is set the functions within a variable which can be called in both the setTimeout() and also on a click() event

var nameOfFunction = function() {
  console.log('Hello World!');
}
setTimeout(nameOfFunction, 2500);

 $('.btn').on('click', function(e) {
     e.preventDefault();
     nameOfFunction();
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="btn">Click Me</button>

answered Oct 5, 2016 at 11:37

Stewartside

21k13 gold badges64 silver badges82 bronze badges

Comments

synthet1c · Accepted Answer · 2016-10-05 11:39:34Z

1

Javascript objects are passed by reference so you can just reference the function by name in each of the callacks.

function myFunc(){
  // all the scripts that need to run
}

setTimeout(myFunc, 2500)

$('.btn').click(myFunc)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Oct 5, 2016 at 11:39

synthet1c

6,3124 gold badges28 silver badges41 bronze badges

Collectives™ on Stack Overflow

jQuery - re-execute a function on button click

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related