让addListener只在js中按需获取数据（不用一直监听）

Question

我在一个项目中使用电容器 3，我有这个代码：

import { PluginListenerHandle } from '@capacitor/core';
import { Motion } from '@capacitor/motion';


let accelHandler: PluginListenerHandle;

myButton.addEventListener('click', async () => {
  try {
    await DeviceMotionEvent.requestPermission();
  } catch (e) {
    // Handle error
    return;
  }

  accelHandler = await Motion.addListener('accel', event => {
    console.log('Device motion event:', event);
  });

});

如您所见，这部分有一个监听器：

accelHandler = await Motion.addListener('accel', event => {
    console.log('Device motion event:', event);
});

每次有动作时都会得到事件。

我想停止它的侦听/循环并仅在函数需要时才能够获取事件数据。

例如：

demandData() {
    // code to return the Motion event data
}

我该怎么做？

Answer 1

您可以在调用您的函数时添加 eventListener 并在您不再需要它时将其删除（如果我正确理解您的需求）。这是用 JS 写的，但我相信你可以将它翻译成 TS :)

let eventData;

demandData() {
    accelHandler = await Motion.addListener('accel', event => {
    console.log('Device motion event:', event);
    eventData = event
});
}

gotData() { 
   if (eventData) {
       Motion.removeAllListeners('accel')
       eventData = null
   }
}

Answer 2

你可以把它包装在一个承诺中，然后像这样等待它解决：

myButton.addEventListener('click', async () => {
  try {
    await DeviceMotionEvent.requestPermission();
  } catch (e) {
    // Handle error
    return;
  }

  accelHandler = await new Promise((resolve) => {
    Motion.addListener('accel', event => {
      console.log('Device motion event:', event);
      resolve(event);
    });
  });
});

更简单更简短：

await new Promise((resolve) => Motion.addListener('accel', resolve));

类似于等待一秒钟，然后继续执行的方式：

await new Promise((resolve) => setTimeout(resolve, 1000));

让addListener只在js中按需获取数据（不用一直监听）

make addListener get data on demand only in js (no keep listening)

javascript

angular

typescript

capacitor