javascript - 函数一旦被调用就会持续存在，即使在经过 if 语句测试之后也是如此

Question

我们在一个 div 中有多个 span。当用户单击空白区域时，我们希望 Span 恢复到原始布局。这是代码:

var whiteSpace = function (){

  $(function(){
    $('div').on('click',function(e) {
      if (e.target !== this)
        return;
      originalL();
    });
  });
};

问题是我们有两种模式，工作模式和设置模式，我们希望它只在工作模式下工作。我们通过按键更改模式，

$(document).on("keypress", function (e){
  if(e.which === 83) {
    alert('"Shift + s" was pressed.  Start Setup Mode.');
    state = "false";
    dragResize();
   var whiteSpaceDisable = function (){
      $(function(){
        $('div').off('click',function(e) {
          if (e.target !== this)
            return;
          originalL();
        });
      });
    };
    whiteSpaceDisable();
  }

  if(e.which === 87) {
    alert('"Shift + w" was pressed.  Start Work Mode.');
    state = "true";
    dragDropWidget ();
    dragResizeDisable();
   whiteSpace = function (){

      $(function(){  
        $('div').on('click',function(e) {
          if (e.target !== this)
            return;
          originalL();
        });
      });
    };
    whiteSpace();
  }
});

当用户第一次尝试从工作模式进入设置模式时，它可以工作。但是，当用户第二次尝试相同的操作时，它不起作用。 WhiteSpace 功能仍然存在。如何在设置模式下关闭该功能呢？顺便说一句，页面重新加载不是一个选项。非常感谢!

Answer 1

在按键处理程序中，替换:

var whiteSpace = ...

与:

whiteSpace = ...

现在，您只需将另一个函数分配给一个新 whiteSpace 变量，该变量的作用域为该按键处理函数。如果您想要覆盖之前定义的 whiteSpace 变量，则需要确保您实际上是分配给同一变量引用，而不是创建一个新变量引用。