Javascript classList 添加和删除在非全局执行上下文中不起作用

Question

我试图通过创建具有 3 个执行上下文的堆栈来制作执行堆栈如何在 Javascript 上工作的原理图。全局、执行 A 和执行 B。为此，我构建了一组嵌套的 div 并添加了一个 displayNone 类。

这些函数应该在运行时使用 classList.remove('displayNone') 删除 displayNone 类，并在 setTimeout 之后，使用 classList.add('displayNone') 再次插入该类。

但由于某种原因，它不起作用。如果我将 classList 命令置于全局上下文中，它将正常工作。

在 HTML 下方:

<button onclick="a()">Run function a</button>
<br>

<div class="global displayNone">
  <p>Este bloco está aparecendo devido a função executada no global execution context que removeu a classe displayNone desta div</p>
  <div class="executionA displayNone">
    <p>Este bloco só vai aparecer durante a execução do execution context da função A.</p>
    <div class="executionB displayNone">
      <p>Este bloco só vai aparecer durante a execução do execution context da função B.</p>
    </div>
  </div>
</div>

JS代码如下:

var content=document.getElementsByClassName('content')[0];
var globalDiv=document.getElementsByClassName('global')[0];
var execA=document.getElementsByClassName('executionA');
var execB=document.getElementsByClassName('executionB');

function rem(x){
  x[0].classList.remove('displayNone');
}
function add(x){
  x[0].classList.add('displayNone');
}


globalDiv.classList.remove('displayNone');
content.innerHTML="output results here";

function b(){
  content.innerHTML="function b executed";
rem(execB);
add(execB);
}

function a(){
  content.innerHTML="function a executed";
rem(execA);
  setTimeout(b,3000);
add(execA);
}

这是 CodePen 上的示例 https://codepen.io/PierBotteroWeb/pen/OBmPPY?editors=1010

Answer 1

它正在按其应有的方式工作，只是不是您期望的那样。在 rem(execA) 和 rem(execB) 下面有 add(execA) 和 add(execB) ，因此您可以同时有效地删除和添加类。这就是为什么您在屏幕上看不到任何变化的原因。

将 add(execA) 和 add(execB) 封装在 setTimeout() 中，然后看看它是如何工作的。