Отключить функцию JS во время работы другой функции

Question

То, что я пытаюсь сделать, кажется таким простым, но я не могу понять это.

Вот базовый сценарий c:

• Функция A

• Функция B запускается при нажатии кнопки

• Мне нужно отключить функцию A во время работы функции B

• Затем, когда функция B будет завершена, снова включите функцию A (туда, откуда мы начали).

Я настроил очень базовую c ручку, чтобы помочь проиллюстрируйте то, чего я пытаюсь достичь. Вы можете игнорировать тот факт, что функции добавляют классы, это было просто для того, чтобы сделать что-то.

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

Так что в этом примере желаемый сценарий будет :

• Блок зеленый

• Блок становится красным при нажатии кнопки

• После изменения на красный, блок меняется на зеленый

Опять же, игнорируйте изменения цвета и добавление / удаление классов - это просто, чтобы что-то произошло.

JS из примера Pen:

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
});

ОБНОВЛЕНИЕ 1

Это моя работа, основанная на ответах от Джаспера и Аддера .

Использование отдельных функций прекрасно работает, но когда я нажимаю кнопку, работает console.log, но я все равно могу делать то, что происходит в операторе if, как будто active = true.

В этом Например, когда я нажимаю кнопку, она должна изменить активный на «ложь» и, следовательно, не допустить, чтобы содержимое оператора if работало. Я надеюсь, что это имеет смысл ....

    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

Answer 1

Думаю, вы не уверены, как работает метод .ready(). Как и для всех функций в JavaScript, как только они заканчивают выполнение sh, они удаляются из стека вызовов.

Эта функция фактически вызывается только один раз (когда полная DOM доступна и загружена) .

Я думаю, что лучший вариант, вероятно, будет создавать функции вне обратного вызова, которые могут быть повторно использованы в каждом событии

например,

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();
});

Надеюсь, это поможет!

Answer 2

Вы можете добавить переменную для управления функцией A. Этот метод может быть полезен при попытке избежать бесконечной рекурсии с помощью триггеров изменения.

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;
});

Я думаю, что вы хотите что-то другое, хотя:

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>