emitter如何只取消某个函数的订阅 HarmonyOS 鸿蒙Next

emitter如何只取消某个函数的订阅 HarmonyOS 鸿蒙Next

页面上有3个按钮，第一个按钮是订阅事件，第二个是发送事件，第三个是取消事件。handler1和handler2是事件处理函数，其中需要使用页面中的message变量。点击第二个按钮时，handler1和handler2都会执行。点击第三个按钮时，取消handler1的注册。handler1和handler2中的this是undefined，如何解决？

代码如下：

import emitter from '@ohos.events.emitter'

@Entry
@Component
struct TestEmitter2 {
  @State message: string = 'Hello World';

  static readonly TAG = 'TestEmitter2'

  handler1() {
    console.log(TestEmitter2.TAG, `执行handler1 message=${this.message}` )
  }

  handler2() {
    console.log(TestEmitter2.TAG, `执行handler2 message=${this.message}` )
  }

  build() {
    Row() {
      Column({space: 10}) {
        Button('订阅事件')
        .onClick(() => {
          emitter.on({ eventId: 1 }, this.handler1)
          emitter.on({ eventId: 1 }, this.handler2)
        })

        Button('发送事件')
        .onClick(() => {
          emitter.emit({ eventId: 1 })
        })

        Button('取消订阅')
        .onClick(() => {
          emitter.off(1, this.handler1)
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

更多关于emitter如何只取消某个函数的订阅 HarmonyOS 鸿蒙Next的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

需要使用callback

import emitter from '@ohos.events.emitter'
@Entry
@Component
struct TestEmitter2 {
  @State message: string = 'Hello World';
  static readonly TAG = 'TestEmitter2'
  handler1() {
    console.log(TestEmitter2.TAG, `执行handler1 message=${this.message}`)
  }
  callback1 = (eventData: emitter.EventData): void => {
    this.handler1()
  };
  handler2() {
    console.log(TestEmitter2.TAG, `执行handler2 message=${this.message}`)
  }
  callback2 = (eventData: emitter.EventData): void => {
    this.handler2()
  };
  build() {
    Row() {
      Column({space: 10}) {
        Button('订阅事件')
          .onClick(() => {
            emitter.on({ eventId: 1 }, this.callback1)
            emitter.on({ eventId: 1 }, this.callback2)
          })
        Button('发送事件')
          .onClick(() => {
            emitter.emit({ eventId: 1 })
          })
        Button('取消订阅')
          .onClick(() => {
            emitter.off(1, this.callback1)
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

更多关于emitter如何只取消某个函数的订阅 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


函数用箭头函数

import emitter from '@ohos.events.emitter'

@Entry
@Component
struct TestEmitter2 {
  @State message: string = 'Hello World';

  static readonly TAG = 'TestEmitter2'

  handler1=()=> {
    console.log('TestEmitter2', `执行handler1 message=`,this.message)
  }

  handler2() {
    console.log('TestEmitter2', `执行handler2 message=`,this.message )
  }

  build() {
    Row() {
      Column({space: 30}) {
        Button('订阅事件')
          .onClick(() => {
            emitter.on({ eventId: 1 },this.handler1)
            // emitter.on({ eventId: 1 }, this.handler2)
          })
        Button('发送事件')
          .onClick(() => {
            emitter.emit({ eventId: 1 })
          })
        Button('取消订阅')
          .onClick(() => {
            emitter.off(1, this.handler1)
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

在HarmonyOS鸿蒙Next中，emitter用于事件发布与订阅。要取消某个函数的订阅，可以使用off方法。具体操作如下：

  1. 确定事件类型和回调函数：首先，需要明确你要取消订阅的事件类型（eventType）以及对应的回调函数（callback）。

  2. 调用off方法：使用emitter.off(eventType, callback)来取消特定事件的特定回调函数的订阅。

示例代码：

import emitter from '@ohos.events.emitter';

// 定义事件类型
const eventType = 'myEvent';

// 定义回调函数
const myCallback = (eventData) => {
    console.log('Event received:', eventData);
};

// 订阅事件
emitter.on(eventType, myCallback);

// 取消订阅
emitter.off(eventType, myCallback);

在这个例子中，emitter.off(eventType, myCallback)会取消myEvent事件的myCallback回调函数的订阅。

注意事项：

  • 如果同一个回调函数被多次订阅到同一个事件，off方法会取消所有对应的订阅。
  • 如果只想取消某个特定的订阅，确保回调函数是唯一的，或者使用不同的回调函数实例。

通过这种方式，你可以精确地取消某个函数的订阅，而不会影响其他事件或回调函数。

回到顶部