iPhone检测摇动事件时shake.js失效，求助可行实现方案

现有代码的核心问题 #

• Shake实例初始化、shake事件监听被错误放在了devicemotion的事件回调中，每次设备运动都会重复执行初始化逻辑、重复绑定事件，会直接导致逻辑异常
• 设备运动权限请求必须绑定在用户主动触发的交互事件（如按钮点击、屏幕触摸）中直接调用，不能嵌套在异步回调或者页面自动执行的逻辑里，iOS会主动拦截非用户主动触发的权限申请
• 必须在HTTPS环境下运行，本地调试仅支持localhost地址，局域网IP的HTTP环境会被iOS限制设备运动相关权限

修正后可正常运行的代码 #

// 全局初始化Shake实例，不要放在回调逻辑中
var myShakeEvent = new Shake({
  threshold: 15, // iOS端建议设置为15左右，避免误触发
  timeout: 1000
});

// 摇动触发逻辑单独抽离
function shakeEventDidOccur() {
  alert('shake!');
}

// 权限请求函数必须绑定到用户主动点击事件上，比如页面按钮的click回调
function ClickRequestDeviceMotionEvent () {
  // 先判断是否需要申请权限
  if (typeof window.DeviceMotionEvent !== 'undefined' && typeof window.DeviceMotionEvent.requestPermission === 'function') {
    window.DeviceMotionEvent.requestPermission()
    .then(response => {
      if (response === 'granted') {
        // 权限通过后启动摇动监听、绑定事件
        myShakeEvent.start();
        window.addEventListener('shake', shakeEventDidOccur, false);
      } else {
        alert('设备运动权限未授予，无法检测摇动');
      }
    })
    .catch(e => {
      alert('权限请求失败：' + e);
    })
  } else {
    // 低版本系统无需申请权限，直接启动监听即可
    myShakeEvent.start();
    window.addEventListener('shake', shakeEventDidOccur, false);
  }
}

无需第三方库的自实现方案 #

如果shake.js适配仍有问题，可以手动实现摇动检测逻辑：

let lastX = 0, lastY = 0, lastZ = 0;
let lastTime = 0;
const shakeThreshold = 15; // 摇动触发阈值
const shakeTimeout = 1000; // 两次触发的最小间隔，避免连续触发

function handleDeviceMotion(e) {
  const acceleration = e.accelerationIncludingGravity;
  const curTime = Date.now();
  
  // 控制计算频率，减少性能消耗
  if ((curTime - lastTime) > 100) {
    const diffTime = curTime - lastTime;
    lastTime = curTime;
    
    const x = acceleration.x;
    const y = acceleration.y;
    const z = acceleration.z;
    
    // 计算加速度变化量
    const speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
    
    if (speed > shakeThreshold) {
      // 此处替换为你的摇动触发逻辑
      alert('摇动检测成功!');
      // 加锁避免短时间内连续触发
      lastTime = curTime + shakeTimeout;
    }
    
    lastX = x;
    lastY = y;
    lastZ = z;
  }
}

// 权限申请通过后绑定监听即可使用
// window.addEventListener('devicemotion', handleDeviceMotion, false);

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