Clearing a Function in JavaScript

Question

This may seem like a simple question. I've tried to Google the answer, but I can't seem to find it so that's why I'm here for help. Part of the problem is that I can't really phrase the question properly, so I will try to explain it here. Here goes...

I have two functions in my JavaScript file (let's name them fn1() and fn2()). I am calling these functions using onclick in my HTML file. For example:

<span class="test" onclick="fn1();">Button #1</span>
<span class="test" onclick="fn2();">Button #2</span>

The functions work perfectly fine when a user clicks on their respective buttons. However, if a users clicks on Button #1, and then Button #2 - both functions are called/loaded simultaneously.

Question: How do I make it so that fn1() is disabled (or cleared) as soon as the user clicks on Button #2, which will load fn2()?

Thank you.

Bhojendra Rauniyar · Accepted Answer · 2014-03-31 05:27:38Z

2

You can use jQuery way the noop method

Within fn1() function you should use $.noop() to empty the function fn2()

Or simply as you are calling it on onclick you can remove that attribute within that function. (I don't recommend to use this)

$('span.test').not($(this)).removeAttr('onclick');

But I extremely recommend to use namespace by which you can unbind the click event like the following instead of calling inline javascript:

The on method

$( "span.test" ).on( "click.something", function( event ) {
//do your stuff here
});

Later you can unbind the click event like this:

The off method

$("span.test").off("click.something");

edited Mar 31, 2014 at 5:27

answered Mar 31, 2014 at 5:11

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

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

1 Comment

kaoscify Over a year ago

A lot of suggestions here, but this one worked for me. Thanks! And I guess the phrase I was looking for "unbind the click event".

Amadan · Accepted Answer · 2014-03-31 05:14:02Z

0

The nice way: disable the fn2 button when you enter fn1 (rather than disabling the function). This also has a side effect of letting the user know that the button is not available. Disabled elements do not fire 'click' events.

$('span.test').not($(this)).prop('disable', true);

The not-so-nice-way: set a variable when you're in one function, and clear it when you exit. Return early from the functions if the variable is set.

The downright ugly way: unbind the onclick from the other buttons if one is clicked. This is so messy that you really don't want to do that.

The I-really-can't-recommend-it-less way: redefine the other functions with no-ops.

answered Mar 31, 2014 at 5:14

Amadan

200k23 gold badges253 silver badges321 bronze badges

Comments

Ahmad Abo Bakr · Accepted Answer · 2014-03-31 05:18:10Z

0

I don't know if I understand your question correctly and I don't have enough rep to comment but if you want the user not to be able to press the second button until the first finishes execution then you could do the follwing

in the first line of your fn2() add the following line

document.getElementById("button1").disabled = true

but you should first give an id button1 to the first button

this will grey the button button1 when the user press the button

after your code finishes execution you should add:

document.getElementById("button1").disabled = false

this will make the button pressable again

answered Mar 31, 2014 at 5:18

Ahmad Abo Bakr

1211 silver badge5 bronze badges

Comments

user2575725 · Accepted Answer · 2014-03-31 05:20:55Z

0

u may try this with flags, this is not going to clear the function e.g.:

var runFn1 = true;

function fn1() {
  if (!runFn1) {
    return;
  }
  // ur code here
}

function fn2() {
  runFn1 = false;
  // ur code here
}

answered Mar 31, 2014 at 5:20

user2575725

Comments

Faiz Mohamed Haneef · Accepted Answer · 2014-03-31 05:24:41Z

0

"The functions work perfectly fine when a user clicks on their respective buttons. However, if a users clicks on Button #1, and then Button #2 - both functions are called/loaded simultaneously."

javascript being single threaded. fn1() execution is first completed and then followed by fn2(). Hope you understand there will not be a case where both are called simultaneously.

For example

function fn1(){
    while(true){
    }
}

function fn2(){
    alert("2");
}
<input type="button" value="Btn1" onClick="fn1();"/>
<input type="button" value="Btn2" onClick="fn2();"/>

Try invoking fn1(). you will be surprised fn2() cannot be invoked!

answered Mar 31, 2014 at 5:24

Faiz Mohamed Haneef

3,6064 gold badges33 silver badges42 bronze badges

Collectives™ on Stack Overflow

Clearing a Function in JavaScript

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related