如何在不使用事件监听器的情况下用JavaScript检测设备运动？

Great question! When building Firefox extensions, the devicemotion event listener is the standard, W3C-specified way to detect device motion—but there are a couple of workarounds and specialized APIs that let you avoid setting up direct event listeners yourself, depending on your use case.

1. Promise-Based Polling (Wrapper for Underlying Events) #

While this still relies on the devicemotion event under the hood, you can wrap the logic into a reusable, promise-based function that lets you "pull" motion data on demand instead of reacting to events directly. Here's how to implement it:

// Cache the latest motion data received from the event
let latestMotionSnapshot = null;

// Initialize the event listener once to update the cache
window.addEventListener('devicemotion', (event) => {
  // Create a copy to avoid reference issues
  latestMotionSnapshot = {
    acceleration: {...event.acceleration},
    accelerationIncludingGravity: {...event.accelerationIncludingGravity},
    rotationRate: {...event.rotationRate},
    interval: event.interval
  };
}, false);

// Function to get the latest motion data (returns a promise)
async function fetchCurrentMotionData() {
  // Wait for the first motion event if no data exists yet
  if (!latestMotionSnapshot) {
    await new Promise(resolve => {
      const initialHandler = () => {
        resolve();
        window.removeEventListener('devicemotion', initialHandler);
      };
      window.addEventListener('devicemotion', initialHandler, false);
    });
  }
  // Return a fresh copy of the cached data
  return {...latestMotionSnapshot};
}

// Example usage: Poll for data every second
setInterval(async () => {
  const motionData = await fetchCurrentMotionData();
  console.log('Updated motion data:', motionData);
}, 1000);

This approach hides the event listener logic behind a clean, queryable interface, so you don't have to manage event bindings directly in your core extension code.

2. WebXR Device API (For VR/AR Scenarios) #

If your extension targets virtual or augmented reality use cases, the WebXR Device API provides motion tracking capabilities without relying on devicemotion. This API is designed for immersive experiences and gives you access to precise device pose (position and rotation) data:

async function initXRMotionTracking() {
  try {
    // Request an immersive VR session (adjust for AR if needed)
    const xrSession = await navigator.xr.requestSession('immersive-vr');
    
    const onXRFrame = (timestamp, frame) => {
      // Get the viewer's pose relative to the sensor reference space
      const viewerPose = frame.getViewerPose(xrSession.renderState.baseLayer.sensorReferenceSpace);
      
      if (viewerPose) {
        // Extract position and orientation data
        const { position, orientation } = viewerPose.transform;
        console.log('XR Device Position:', position);
        console.log('XR Device Orientation:', orientation);
      }
      
      // Continue the frame loop
      xrSession.requestAnimationFrame(onXRFrame);
    };
    
    xrSession.requestAnimationFrame(onXRFrame);
  } catch (error) {
    console.error('WebXR not supported or access denied:', error);
  }
}

Important Note: This only works on devices that support WebXR (e.g., VR headsets, some modern mobile devices with AR capabilities) and requires user permission to access immersive modes. It's not a general-purpose replacement for devicemotion.

Key Caveat #

There’s no native web API for device motion detection that completely avoids event-based data delivery. Sensor data is inherently asynchronous—browsers push updates to your code as they’re received from the device hardware, which is why events are the standard pattern. Any "non-listener" approach will either wrap these events or be limited to specialized use cases like XR.

Firefox Extension Considerations #

Don’t forget to declare the necessary permissions in your manifest.json (e.g., "activeTab" or <all_urls>) to access sensor data on the pages your extension interacts with. You’ll also need to handle cases where users deny sensor access via browser privacy settings.

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