为什么在添加监听器时会出错？

Question

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    function onSuccess(position) {
        this.latitude = position.coords.latitude;
        this.longitude = position.coords.longitude;
        this.speed = position.coords.speed;
        console.log(this.speed);
        document.getElementById("updater").innerHTML = ' ' + this.speed +" m/s"
    }
    function onError(error) {
        alert('code: '    + error.code    + '\n' +
              'message: ' + error.message + '\n');
    }
    var watchID = navigator.geolocation.watchPosition(this.onSuccess, this.onError, { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true });
}

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage {
    framework = 'At exact boarding time';

    constructor(private pickerCtrl:PickerController, 
        private geolocation: Geolocation) {}

    async showPicker() {
        let opts: PickerOptions ={
            buttons: [
                {
                    text:'Done'
                }

            ],

            columns: [
                {
                    name: 'framework',
                    options: [
                        {text:'10 minutes before boarding time',value:0},
                        {text:'5 minutes before boarding time',value:1},
                        {text:'At exact boarding time',value:2},
                        {text:'5 minutes after boarding time',value:3},
                        {text:'10 minutes after boarding time',value:4}
                    ],
                    selectedIndex: 2,
                }
            ]
        }
        let picker = await this.pickerCtrl.create(opts);
        picker.present();
        picker.onDidDismiss().then(async data=>{
            let col = await picker.getColumn('framework');
            this.framework=col.options[col.selectedIndex].text
        })
    }
}

因此，我在顶部放置了侦听器，该侦听器应在应用程序启动时激活以下功能 "onDeviceReady()"。现在我正在尝试更新 html 元素。

但是元素没有更新，我是否正确地处理了这个问题？我是打字稿的新手。

Answer 1

您正在将 this.onSuccess 传递给 .watchPosition。但是这里的 onSuccess 是一个局部变量，而不是执行上下文的属性 (this).

这意味着 onSuccess 永远不会被调用。

离开 this. 将本地定义的函数作为成功处理程序传递。

var watchID = navigator.geolocation.watchPosition(
  onSuccess,
  onError,
  {
    maximumAge: 3000,
    timeout: 5000,
    enableHighAccuracy: true,
  }
);

我真的很惊讶打字稿没有将此标记为错误。我会仔细检查以确保您设置正确。

事实上，您在 onSuccess 中使用 this 的任何地方都只是泄漏到全局范围。创建一个对象或 class 来处理它并保持状态，或者重构它现在完全使用 this。

为什么在添加监听器时会出错？

Why do I get an error when adding a listener?

typescript

ionic5