为何添加IF语句后shake事件触发的函数会重复执行？

原因推测 #

你遇到的shake事件无限重复触发问题，核心原因是DOM修改（切换SVG背景、太阳颜色）引发的页面重排/重绘，干扰了Shaker.js对设备运动传感器数据的判断，形成恶性循环：摇晃触发DOM修改，DOM修改导致传感器数据出现异常波动（部分设备会把页面视觉变化关联到运动检测逻辑），Shaker.js误判为新的摇晃动作，再次触发changeBackground，如此反复。

另外也需排查是否在DOM修改逻辑中不小心重复绑定了shake事件，但从你“仅输出次数时功能正常”的描述来看，这种概率较低。

解决办法 #

按优先级尝试以下方案：

1. 添加节流机制限制触发频率
   给changeBackground套一个节流函数，强制短时间内只能执行一次，打断循环触发的链条：

// 节流函数：1秒内仅执行一次目标函数
function throttle(fn, delay = 1000) {
  let lastTriggerTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTriggerTime >= delay) {
      fn.apply(this, args);
      lastTriggerTime = now;
    }
  };
}

// 初始化时绑定节流后的函数
function initShake() {
  const shaker = new Shaker();
  shaker.on('shake', throttle(changeBackground));
}

2. 提高Shaker.js的触发阈值
   调整shakeThreshold参数，提升摇晃检测的严格程度，避免误判页面变化带来的传感器波动：

// 把阈值从默认的10左右调到15-20，根据实际设备手感调整
const shaker = new Shaker({ shakeThreshold: 18 });

3. 临时禁用事件，处理完DOM后再恢复
   在changeBackground执行时先解绑shake事件，等DOM修改完成后延迟重新绑定：

// 初始化时把shaker实例挂载到全局方便调用
let shakerInstance;
function initShake() {
  shakerInstance = new Shaker();
  shakerInstance.on('shake', changeBackground);
}

function changeBackground() {
  // 先解绑事件，避免循环触发
  shakerInstance.off('shake', changeBackground);
  
  // 你的SVG背景、颜色切换逻辑
  if (shakeCount % 2 === 0) {
    // 切换白天背景和黄色太阳
  } else {
    // 切换夜晚背景和橙色太阳
  }
  
  // 输出摇晃次数
  console.log(shakeCount++);
  
  // 延迟1秒后重新绑定事件
  setTimeout(() => {
    shakerInstance.on('shake', changeBackground);
  }, 1000);
}

4. 优化DOM操作，减少重排幅度
   用CSS类切换代替直接修改元素style属性，降低页面重排的影响：

/* 预先定义好样式类 */
.svg-bg-day { background-image: url('day-bg.svg'); }
.svg-bg-night { background-image: url('night-bg.svg'); }
.sun-yellow { fill: #ffd700; }
.sun-orange { fill: #ff8c00; }

function changeBackground() {
  const svgEl = document.getElementById('main-svg');
  const sunEl = document.getElementById('sun-shape');
  
  if (shakeCount % 2 === 0) {
    svgEl.classList.replace('svg-bg-night', 'svg-bg-day');
    sunEl.classList.replace('sun-orange', 'sun-yellow');
  } else {
    svgEl.classList.replace('svg-bg-day', 'svg-bg-night');
    sunEl.classList.replace('sun-yellow', 'sun-orange');
  }
  
  console.log(shakeCount++);
}

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