CODEWITHSUNDEEP
jquery
Joe
Joe

Reputation: 1635

Return False / Stop jQuery Function on click

I have function Start() that is fired on ready. When I click on .ExampleClick, I want to stop function Start() from running. Here is my example...

$(document).ready(function(){

  $(function Start(){
      // Do Stuff on Ready
  });

  $(document).on("click",".ExampleClick",function() {
     // When this is fired, function Start() should stop running
  });

});

What is the best method to achieve what I am trying to do?

Upvotes: 2

Views: 7653

Answers (4)

mgibsonbr
mgibsonbr

Reputation: 22007

Update: as others pointed out, my previous solution was entirely wrong. I'm replacing it with the setInterval/clearInterval approach (for the sake of correctness - others have already pointed out better/similar solutions):

$(document).ready(function(){

    var start = setInterval(
        function Start(){
            // Do Stuff on Ready
        },
        someReasonableTimeFrame
    );

    $(document).on("click",".ExampleClick",function() {
        // When this is fired, function Start() should stop running
        clearInterval(start);
    });

});

Upvotes: 0

Doug Harris
Doug Harris

Reputation: 3369

Sounds like you have a function you want to run repeatedly and then stop it when you click:

doStuff = function() {
    // stuff to do regularly
}

$(document).ready(function(){

    // run doStuff every 2 seconds
    var jobId = window.setInterval(doStuff, 2000);

    // store the job id in a jquery data object
    $('body').data("doStuffJobId", jobId);

    // set up click hander for css class Example Click
    $(".ExampleClick").click(function() {
        // get the job id
        var jobId = $('body').data("doStuffJobId");
        window.clearInterval(jobId);
    });

});

Upvotes: 3

RemarkLima
RemarkLima

Reputation: 12037

You could fudge something with a setinterval():

$(document).ready(function(){ 

  var intervalHolder;     

  $(function Start(){ 
      // Do Stuff on Ready
      intervalHolder = setInterval("myTimedFunction()",1000);
      // This runs "myTimedFunction()" every second
  }); 

  $(document).on("click",".ExampleClick",function() { 
     // When this is fired, function Start() should stop running 
     clearInterval(intervalHolder);
  }); 

}); 

function myTimedFunction() {
   // Do groovy things every second
};

It's a bit primative, but could be worked to acheive a similar effect.

Upvotes: 2

user229044
user229044

Reputation: 239311

If Start is looping forever, your browser will hang. JavaScript functions cannot truly run in parallel. Assuming that Start is indeed some background process that is meant to loop forever, you'll need to re-think things so that it executes once and then schedules itself to execute again some point in the future, allowing other events to be handled.

Each time Start executes, it can examine some state maintained by the on-click handler to decide whether or not it should run and enqueue itself again:

$(document).ready(function(){

  var clicked = false;

  var Start = function () {
      if (clicked) return;

      // Do Stuff on Ready

      setTimeout(Start, 100);
  };

  Start();

  $(document).on("click",".ExampleClick",function() {
     // When this is fired, function Start() should stop running

     clicked = true;
  });

});

Upvotes: 8

Related Questions