在另一个函数运行时禁用一个 JS 函数

Question

我想做的事情看起来很简单，但我想不通。

这是基本场景：

• 函数 A 正在运行

• 功能 B 在单击按钮时启动

• 我需要在功能 B 运行时禁用功能 A

• 然后当功能B完成后，重新启用功能A（回到我们开始的地方）。

我已经设置了一个非常基本的 Pen 来帮助说明我想要实现的目标。你可以忽略函数添加类的事实，这只是让它做一些事情。

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

因此，在示例中，所需的场景是：

• 方块是绿色的

• 点击按钮时块变为红色

• 变红后，方块变回绿色

同样，忽略颜色变化和添加/删除类 - 这只是为了让某些事情发生。

来自 Pen 示例的 JS：

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

这是我根据 Jasper 和 Adder 的回答所做的工作。

使用单独的函数效果很好，但是当我单击按钮时，console.log 可以工作，但我仍然可以执行 if 语句中发生的事情，就像 active = true 一样。

在此示例中，当我单击按钮时，它应该将 active 更改为“false”，因此不允许 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

您可以添加一个变量来控制函数 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>

Answer 2

我认为您可能对.ready() 方法的工作原理感到困惑。 与 JavaScript 中的所有函数一样，一旦它们完成执行，它们就会从调用堆栈中删除。

这个函数实际上只调用一次（当完整的 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();
});

我希望这会有所帮助！