为什么JS逻辑运算各子项均为true，组合后运算结果却为false？

问题原因 #

• 三个打印的true并非来自同一次函数调用：mousemove类鼠标事件每秒会触发数十次，你控制台看到的三个true很可能分属不同的事件回调，某一次回调里三个条件至少有一个不满足，组合后自然为false。
• isMovingUp函数存在副作用：如果你在isMovingUp内部修改了event.pageY、event.movementY等属性，会导致后续判断的取值和打印时的取值不一致。另外你打印的执行顺序和if判断的执行顺序不一样：打印时先执行isMovingUp(event)再读取event.movementY，if判断时先读取event.movementY再执行isMovingUp(event)，如果isMovingUp会修改event属性，两次场景下的取值就会有差异。
• 控制台输出存在异步延迟：浏览器的console日志输出存在一定延迟，打印时捕获的可能是最终的属性值，而非执行打印语句瞬间的属性值。

解决方案 #

你可以先把三个条件的结果在回调最开始就存为本地常量，再做打印和判断，完全避免取值时机不同的问题，修改后代码如下：

const showModalBeforeOut = (event) => {
  const headerBlock = document.querySelector("#header");
  // 先一次性计算所有条件的取值，存入常量避免后续值变化
  const cond1 = event.pageY < 30;
  const cond2 = event.movementY < 0;
  const cond3 = isMovingUp(event);
  const combined = cond1 && cond2 && cond3;

  console.log(cond1, cond2, cond3, combined);

  if (combined) {
    console.log(`逻辑表达式的取值为: ${combined}`);
    let modalTextContent = "Don't leave the site!";
    let isCookieExists = checkCookie('max-age')
    if (!isCookieExists) {
      // 若此处不存在cookie，先展示模态窗，之后初始化值为`max-age`的cookie
      displayPopup(modalTextContent);
      document.cookie = 'max-age=15'
      if (document.body.contains(document.querySelector('.question-p'))) {
        const targetElement = document.querySelector('.question-p')
        targetElement.textContent = "Leaving already?"
      }
    }
  }
}

修改后如果三个常量都是true，那么combined必然为true，就能排除取值时机不同的问题。如果此时还是出现不一致，你需要检查isMovingUp函数的返回值是否为严格布尔类型，是否存在返回truthy/falsy值而非true/false的情况。

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