Disable a JS function while another function is running

Question

What I'm trying to do seems so simple but I can't figure it out.

Here's the basic scenario:

Function A is running
Function B starts when a button is clicked
I need to disable Function A while Function B is running
Then when Function B is complete, re enable Function A (back to where we started).

I have setup a very basic Pen to help illustrate what I'm trying to achieve. You can ignore the fact that the functions add classes, this was just to have it do something.

https://codepen.io/andystent/pen/yLNbyjZ?editors=1111

So in the example the desired scenario would be:

Block is green
Block changes to red when button is clicked
After changing to red, block changes back to green

Again, ignore the color changes and adding/removing classes - that is just to have something happen.

JS from the Pen example:

var block = document.getElementById("block");
var button = document.getElementById("button");

//Function A: the main function that is active by default - I need this function disabled/stopped when the button is clicked, and then re enabled when Function B is complete.
$(document).ready(function(){
  block.classList.add("green"); //adding class is only for example
});

//Function B
$(button).click(function(){
  block.classList.add("red"); //adding class is only for example
});

UPDATE 1

This is my working based on answers from Jasper and Adder.

Using the separate functions works great but when I click the button the console.log works but I can still do what's happening in the if statement, as if active = true.

In this example, when I click the button it should change active to "false" and therefore not allow the if statement's content to work. I hope that makes sense....

    var aActive = true;


    // FUNCTION A - Active is True
    function fA(){
      aActive = true;
      console.log("active = true");
    };

    //FUNCTION B - Active is False
    function fB(){
      aActive = false;
      console.log("active = false");
    }

    //When clicking Nav link run Function B (active false)
    var navLinks2 = document.querySelectorAll("#nav-wrap nav a")

    navLinks2.forEach(function (navLink2) {
      navLink2.addEventListener('click', function () {
        fB();
        //fA();
      });
    });



    //Only do this if Active is TRUE
    if(aActive) {

      //do something

    } //end if active

I updated my answer with a code snippet.

Adder
– Adder

2020-02-27 13:37:50 +00:00
Commented Feb 27, 2020 at 13:37 — Adder
– Adder, Commented Feb 27, 2020 at 13:37

Vishal Pawar · Accepted Answer · 2020-02-27 13:22:02Z

2

I think you may be confused about how the .ready() method works. As with all functions in JavaScript, as soon as they finish executing they are removed from the call stack.

This function is actually only called once (when the full DOM is available and loaded in).

I think the best option would probably create functions outside of the callback, that can be reused in each event

e.g

var button = document.getElementById("button");

function addGreenClass() {
    block.classList.add("green"); // Obviously putting the correct things in each function
};

function addRedClass() {
    block.classList.add("red"); // Obviously putting the correct things in each function
};

$(document).ready(addGreenClass);
$(button).click(function() {
    addRedClass();
    addGreenClass();
});

I hope this helps!

edited Feb 27, 2020 at 13:22

Vishal Pawar

4,3384 gold badges32 silver badges56 bronze badges

answered Feb 27, 2020 at 13:16

Jasper Chesselet

2102 silver badges7 bronze badges

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

2 Comments

Kablooey Monster Over a year ago

Thank you @Jasper . This could definitely point me in the right direction!

Kablooey Monster Over a year ago

I have updated my question based on your advice. It's a combo of your idea to keep the functions separate, and @Adder 's idea to use an action variable. Do you have any advice on how my new edit could work? Thank you for your help!

Adder · Accepted Answer · 2020-02-27 13:36:24Z

1

You can add a variable to control function A. This technique can be useful when trying to avoid endless recursion by change triggers.

var button = document.getElementById("button");

var aActive = true;

//Function A: the main function that is active by default - I need this function disabled/stopped when the button is clicked, and then re enabled when Function B is complete.
$(document).ready(function(){
    if(aActive) {
        block.classList.add("green"); //adding class is only for example
    }
});

//Function B
$(button).click(function(){
  aActive = false;
  block.classList.add("red"); //adding class is only for example
  aActive = true;
});

I think you want something different though:

var button = document.getElementById("button");
var block = document.getElementById("block");

var aActive = true;

//Function fA: the main function that is active by default - I need this function disabled/stopped when the button is clicked, and then re enabled when Function B is complete.
function fA(){
	if(aActive) {
		block.classList.add("green"); //adding class is only for example
		block.classList.remove("red");
	}
}

function fB(){
  aActive = false;
  block.classList.add("red"); //adding class is only for example
  block.classList.remove("green");
  aActive = true;
}

$(document).ready(fA);

//Function B
$(button).click(function() {
	setTimeout(fB,0);
	setTimeout(fA,3000);
});

.green {
  background-color: green;
}

.red {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button">Click me</button>
<div id="block">&nbsp;</div>

edited Feb 27, 2020 at 13:36

answered Feb 27, 2020 at 13:16

Adder

5,8982 gold badges35 silver badges60 bronze badges

6 Comments

Kablooey Monster Over a year ago

this could be what I'm looking for! Sort of a combo of Jasper's answer, with the functions outside the callback, and adding the variable. I'm going to give this a go in the actual project and see if it works. I'll post the original code if I get stuck. Thank you both!

Kablooey Monster Over a year ago

I have updated my question based on your advice. I feel I'm really close but can't quite get it right. Thank you for your help!

Adder Over a year ago

@KablooeyMonster I feel I need to address a misunderstanding: You cannot disable a function's effect by putting it in if. What you can do is to stop it from running its code when the function is called.

Kablooey Monster Over a year ago

Thank you Adder, I'm pretty new to JS so thank you for your patience. Let me explain what I'm actually trying to achieve in my project. I have a smooth scrolling effect on my site based on the mouse wheel scrolling. I also have # anchor links in the navigation. Currently when you click the anchor links they sometime get stuck because of the smooth scrolling script. Basically I want the smooth scrolling script to be ignored when an anchor link is clicked. Does this make more sense? Again, thank you for your help so far! I'm really learning a lot!

Adder Over a year ago

@KablooeyMonster The code in this answer shows how to disable function fA when running fB. Try to understand it and copy it more accurately into your code. Because your edits in the question are not complete. fA would be your smooth scrolling script and fB your anchor link clicked script. fA is disabled by placing the function body in an if(aActive) and setting aActive to false in fB and also setting aActive to true at the end of fB. You might have to use a timeout there.

|

Collectives™ on Stack Overflow

Disable a JS function while another function is running

2 Answers 2

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related