JavaScript函数未注册按键事件：回车无法终止函数问题排查

你遇到的核心问题并不是作用域或闭包问题，而是JavaScript事件处理的异步执行特性导致的代码执行顺序问题，我来给你拆解清楚：

为什么enter变量始终是false？ #

当你调用positionArrow函数时，代码是同步执行的：

1. 首先声明var enter = false；
2. 接着给document绑定了keypress事件监听（但这时候用户还没按回车，事件处理函数根本没执行）；
3. 立刻执行console.log(enter)——这时候enter还是初始的false；
4. 然后执行后面的if (enter == true)判断，同样因为enter是false，不会进入分支。

只有当用户之后按下回车时，事件处理函数才会触发，把enter设为true，但这时候前面的console.log和if判断早就执行完了，不会重新运行，所以你看不到预期的变化。

怎么解决？ #

根据你的需求（按下回车终止positionArrow的逻辑），分两种常见场景给出方案：

场景1：positionArrow是持续运行的循环（比如动画、轮询）

把终止判断放到循环内部，每次循环都检查enter的状态：

function positionArrow(arrow) {
  let enter = false;

  // 绑定回车事件，注意用let而不是var（避免变量提升的潜在问题）
  $(document).keypress(function(e) {
    if(e.which == 13) {
      enter = true;
      console.log('回车已按下，准备终止');
    }
  });

  // 假设这是你的持续运行逻辑（比如用requestAnimationFrame做动画）
  function loop() {
    if (enter) {
      // 终止逻辑：移除事件监听+停止循环
      $(document).off('keypress');
      console.log('positionArrow已终止');
      return;
    }

    // 这里写你的箭头定位核心逻辑
    console.log('正在定位箭头...');

    // 继续下一轮循环
    requestAnimationFrame(loop);
  }

  // 启动循环
  loop();
}

场景2：等待回车来终止某个异步操作（比如定时器）

用Promise封装回车事件，让代码异步等待用户输入：

// 封装一个等待回车的Promise
function waitForEnter() {
  return new Promise(resolve => {
    // 用.one()确保事件只触发一次，避免重复绑定
    $(document).one('keypress', function(e) {
      if(e.which == 13) {
        resolve();
      }
    });
  });
}

async function positionArrow(arrow) {
  console.log('positionArrow已启动，按回车终止');

  // 示例：启动一个定时执行的定位逻辑
  const positionTimer = setInterval(() => {
    console.log('正在定位箭头...');
  }, 500);

  // 等待用户按下回车
  await waitForEnter();

  // 回车按下后，终止操作
  clearInterval(positionTimer);
  console.log('positionArrow已终止');
}

额外提醒 #

• 尽量用let/const代替var，避免变量提升带来的意外问题；
• 终止操作时记得移除事件监听（比如$(document).off('keypress')或者用.one()自动解绑），防止内存泄漏。

内容的提问来源于stack exchange，提问作者Jack Clarke