0

I have two buttons a and b on my web page whose onclick events are bound with two JavaScript functions, x and y.

When the user clicks on button a, execution of x starts and lets say during the execution of function x, user presses the button b.
Now I want to implement the logic that when b button is pressed, execution of x should stop immediately and execution of y should start.

Is it possible to do this in JavaScript? If yes, then how?

3
  • too theoretical, provide some code please, then we can help - in other words: What have you tried? Oct 8, 2013 at 16:39
  • 3
    Impossible to answer without knowing what x and y are doing and how to kill them off. Oct 8, 2013 at 16:39
  • No, that's not directly possible, as the button click isn't handled until your javascript execution finished. Solutions might be to use webworkers or to cut your function in small ones chained using setTimeout. Oct 8, 2013 at 16:40

3 Answers 3

0

I'm afraid you can't stop a function once it starts unless it is async (and that you can control it like an AJAX request).

You could do things in a loop, and have a value be some cancellation condition.

0

In general, javascript is single threaded AND it blocks the user interface while executing. So, when you press button a and function x starts, your navigator will not allow you to press button b until x has finished.

0

There are two tricky sides to your problem:

  1. when the user clicks on button A
  2. execution of X should stop immediately

The first part is tricky because while the user can click on the button at any time, the web page will not be aware of it until the execution context gets around to processing that particular event. Since JS is single threaded, if you are in the middle of function X, you will not get any click events until function X is completed.

This problem can be circumvented by splitting your function in small chunks and delay their execution allowing the execution context to handle the events that happend while working.

function doSomeWork(nextFunction) {
   // do work
   setTimeout(nextFunction, 0); // allow event handling, then continue with nextFunction
}

There are many things to say about this sort of asynchronous programming, so i won't go into anymore detail here.

The second problem while at first glance is simpler, has its own issues. For example in the following code:

   function Y() {
      X();
      Z();
   }

   function X()  {
     // stop execution please!
   }

When you stop execution of X (using return most likely), it will only fall back to Y which will continue execution and call Z. From your question it seems like you want it to stop everything and start a whole new 'thread'.

A possible solution to this is to throw an Error from X which is not caught in Y. That will also exit from Y, but i can't help but consider it an ugly hack and can't support it.

Perhaps with more details on your exact problem we can come up with easier/better answers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.