Javascript clearInterval with button click

Question

I'm having issues getting clearInterval to work when I try to bind it to a button click. Also, apparently the function is starting on it's own... Here's my code

var funky = setInterval(function() {
    alert('hello world');
}, 2000);

$('#start').click(function() {
    funky();
});
$('#stop').click(function() {
    clearInterval(funky);
});

Here's a js fiddle

isvforall · Accepted Answer · 2016-09-14T09:12:28.607

You have forgot to add jquery library and have made wrong assignment, it needs to be inside callback function.

Working example:

var funky;

$('#start').click(function() {
  funky = setInterval(function() {
    alert('hello world');
  }, 2000);
});

$('#stop').click(function() {
    clearInterval(funky);
});

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

mhodges · Answer 2 · 2016-03-15T21:11:35.473

First off, yes, when you assign a variable to a function, it self invokes.

Secondly, your click events are not working because you need assign the interval to the variable on the click, not invoke the function - there is no function to invoke, as you would see if you looked at your developer console.

Lastly, it is good practice to wrap the jQuery code in the document ready function to ensure all of your event handlers get bound properly.

$(function () {
  var funky;
  $('#start').click(function() {
    funky = setInterval(function() {
      alert('hello world');
    }, 1000);
  });

  $('#stop').click(function() {
      clearInterval(funky);
  });
});

score 0 · Answer 3 · answered Mar 15 '16 at 21:05

0

You're saving the wrong value. Try this:

var funky = function() {
    alert('hello world');
}

var funkyId = setInterval(funky, 2000);

$('#start').click(function() {
    funky();
});
$('#stop').click(function() {
    clearInterval(funkyId);
});

answered Mar 15 '16 at 21:05

Amit

45,440
9
78
110

4

I dont think he wants to start the interval until start button is clicked – Rosenumber14 Mar 15 '16 at 21:11
@Rosenumber14 - my mind reading skills are far inferior to my programming skills. perhaps OP should read [ask] and ask better questions. – Amit Mar 15 '16 at 22:06
"Also, apparently the function is starting on it's own..." <- this was part of his question, and looking at his code you can tell he wants to start the interval when the button named "start" is clicked and stop the interval when "stop" is clicked. Seems to be the scenario that makes the most sense... – Rosenumber14 Mar 16 '16 at 00:07

score 0 · Answer 4 · answered Apr 08 '20 at 03:22

Here I am giving you the idea.

declare a variable e.g. let x;
create a function which you want to bind with setInterval. e.g. function funky() { alert("Hello World"); }
assign start.onclick to a function which will assign the setInterval to x. e.g start.onclick = function(){ clearInterval(x); // to prevent multiple interval if you click more than one x = setInterval(funky, 2000); // assign the setInterval to x };
assign stop.onclick to clearInterval(x) to stop the interval. e.g. stop.onclick = function() { clearInterval(x); // to stop the interval };

That's it. Easy right.

Javascript clearInterval with button click

4 Answers4

Linked