javascript - 为什么我的 JavaScript 函数在我告诉它在另一个函数运行时停止时继续运行？

Question

不知道为什么这个函数继续运行。函数 a() 应始终运行，除非函数 b() 正在运行。当单击具有类“btn”的按钮时，将启动函数 b()。我不知道为什么这不起作用。谢谢！

    var bActive = false;
    
    if(bActive == false){
        a();
    }
    function a(){
        const toggleGreat = document.querySelector('.great')
        const rawr = document.querySelector('.rawr')

        toggleGreat.addEventListener('mouseover', function(){
        rawr.classList.remove('active');
        })
    }
    function b(){
        bActive = true;

        const rawr = document.querySelector('.rawr');
        const paper = document.querySelector('.paper');

        rawr.classList.add('active');
        paper.classList.remove('active')
    }

    btn.addEventListener('click',function(){
        b();
    }

标签： javascriptfunction

Answer 1

函数不会按照您描述的方式“继续运行”。这两个函数都将事件处理程序绑定到 DOM 并立即退出。您无法更改aaftera已运行的功能。

一种可能的解决方案是在事件处理程序内部测试是否bActive为真：

var bActive = false;

const toggleGreat = document.querySelector('.great')
const rawr = document.querySelector('.rawr')
const paper = document.querySelector('.paper');

toggleGreat.addEventListener('mouseover', function(){
  if (!bActive) {
    rawr.classList.remove('active');
  }
})

btn.addEventListener('click',function(){
  bActive = true;
  rawr.classList.add('active');
  paper.classList.remove('active')
}