页面切换场景下JavaScript的var变量为何存在多个值？

1. 为什么会出现多个move变量？ #

核心原因是var的作用域特性加上未清理的闭包：

• var只有函数作用域或全局作用域，没有块级作用域。每次调用openPage时，函数内部用var声明的move会在当前函数执行上下文里创建一个新变量，而非覆盖之前的。
• 绑定在<aside>上的mousemove事件回调、setTimeout的回调会形成闭包，牢牢持有当前执行上下文里的move引用。页面切换后，旧页面的事件和定时器没被销毁，这些闭包不会被垃圾回收，因此多个move变量会同时存在（控制台显示的move1、move2就是不同闭包里的独立变量）。

2. 为什么其他页面的move会影响当前页面？ #

你隐藏元素的逻辑大概率是通过全局选择器（比如document.getElementById('pictures')）操作元素，而ID在DOM中是唯一的。当旧页面的move达标时，代码会选中当前DOM里唯一的#pictures（即当前页面的元素）执行隐藏操作，进而产生跨页面干扰。

• 替换var为let：let拥有块级作用域，能严格隔离每次openPage调用时的变量，避免闭包产生多个变量实例。
• 页面切换时清理旧资源：每次调用openPage渲染新内容前，先处理旧页面的残留：

  // 示例：清理旧的aside元素与相关资源
  const oldAside = document.getElementById('pictures');
  if (oldAside) {
    // 移除mousemove事件（需提前把回调存为变量）
    oldAside.removeEventListener('mousemove', handleMouseMove);
    // 清除定时器（需在创建时记录timerId）
    clearTimeout(timerId);
    // 彻底移除旧元素
    oldAside.remove();
  }
  

• 绑定元素实例而非全局查找：渲染新的<aside>后，用变量保存这个元素实例，后续的事件绑定、隐藏操作都基于这个实例，避免全局选择器的副作用。

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