鸿蒙中延迟事件发射器 LazyEventEmitter-CSDN博客

本文链接：https://blog.csdn.net/wangsen927/article/details/148849590

本文同步发表于我的微信公众号，微信搜索程语新视界即可关注，每个工作日都有文章更新

LazyEventEmitter是鸿蒙开发中一个强大的事件管理工具，它允许开发者在页面不可见时暂存事件，等到页面可见时再执行处理逻辑。下面详细介绍其API和使用方法。

一、LazyEventEmitter的核心概念

1. LazyEventEmitter的作用

LazyEventEmitter通过以下机制工作：

当页面可见时：立即执行事件处理
当页面不可见时：将事件存入缓冲区
当页面再次可见时：自动处理积压的事件

2. 构造函数

const lazyEmitter = new LazyEventEmitter(options?: {
  maxBufferSize?: number; // 最大缓存事件数，默认50
  defaultPriority?: EventPriority; // 默认优先级，默认为LOW
});

3. 事件订阅方法

`on(eventName: string, callback: Function, options?: {page?: Component})`

持续订阅事件，可绑定到特定页面组件

参数：

eventName: 事件名称
callback: 回调函数
options.page: 绑定的页面组件（用于自动管理可见性）

示例：

lazyEmitter.on('data_update', (data) => {
  console.log('处理数据:', data);
}, { page: this });

`once(eventName: string, callback: Function, options?: {page?: Component})`

单次订阅事件，触发后自动取消订阅

示例：

lazyEmitter.once('init_complete', () => {
  console.log('初始化完成');
});

4. 事件发射方法

`emit(eventName: string, data?: any, options?: {immediate?: boolean})`

发送事件，根据页面可见性决定立即执行或缓存

参数：

immediate: 是否强制立即执行（忽略可见性检查）

示例：

// 普通发送（受可见性控制）
lazyEmitter.emit('user_action', { type: 'click' });

// 强制立即发送
lazyEmitter.emit('critical_error', err, { immediate: true });

5. 可见性控制方法

`bindToPage(page: Component)`

绑定页面组件，自动管理事件可见性

示例：

@Entry
@Component
struct MyPage {
  aboutToAppear() {
    lazyEmitter.bindToPage(this);
  }
}

`setActive(isActive: boolean)`

手动设置发射器活跃状态

示例：

onPageShow() {
  lazyEmitter.setActive(true);
}

onPageHide() {
  lazyEmitter.setActive(false);
}

6. 缓存管理方法

`flush()`

立即处理所有缓存事件

示例：

lazyEmitter.flush(); // 强制处理所有积压事件

`clearBuffer()`

清空事件缓存

示例：

lazyEmitter.clearBuffer(); // 丢弃所有未处理事件

二、完整使用示例

1. 基本使用场景

import { LazyEventEmitter } from '@ohos.event';

// 创建实例（全局单例）
const lazyEmitter = new LazyEventEmitter();

@Entry
@Component
struct EventDemoPage {
  aboutToAppear() {
    // 订阅事件
    lazyEmitter.on('data_update', (data) => {
      console.log('处理数据:', data);
      // 更新UI等操作
    });
    
    // 绑定当前页面（自动管理可见性）
    lazyEmitter.bindToPage(this);
  }

  build() {
    Column() {
      Button('发送测试事件')
        .onClick(() => {
          // 发送事件（会自动根据页面可见性处理）
          lazyEmitter.emit('data_update', { 
            time: new Date().toISOString(),
            value: Math.random()
          });
        })
    }
  }
}

2. 高级配置示例

// 创建带自定义配置的发射器
const customEmitter = new LazyEventEmitter({
  maxBufferSize: 100, // 最大缓存100个事件
  defaultPriority: EventPriority.HIGH // 默认高优先级
});

// 在页面中使用
@Entry
@Component
struct AdvancedDemo {
  aboutToAppear() {
    // 配置事件去重（同类型事件只保留最新一条）
    customEmitter.setDeduplicate('network_response', true);
    
    // 设置事件TTL（5秒后自动丢弃未处理事件）
    customEmitter.setTTL(5000);
    
    // 订阅事件
    customEmitter.on('network_response', (data) => {
      console.log('网络响应:', data);
    });
    
    customEmitter.bindToPage(this);
  }

  // 模拟网络请求
  fetchData() {
    // 发送网络请求事件
    customEmitter.emit('network_response', {
      url: 'api.example.com/data',
      status: 200,
      payload: { /*...*/ }
    });
  }
}

三、实际应用场景

1. 页面间通信

// 页面A发送事件
lazyEmitter.emit('navigate_to', { page: 'detail', id: 123 });

// 页面B接收事件
lazyEmitter.on('navigate_to', (data) => {
  if (this.isActive) { // 确保页面可见时才处理
    router.push({ url: `pages/${data.page}?id=${data.id}` });
  }
});

2. 数据懒加载

lazyEmitter.on('load_more_data', () => {
  if (this.isVisible) { // 只在可见时加载
    this.fetchMoreData();
  }
});

// 滚动到列表底部时触发
lazyEmitter.emit('load_more_data');

3. 性能敏感操作

// 只在页面可见时执行动画
lazyEmitter.on('start_animation', () => {
  animateTo({ duration: 500 }, () => {
    this.opacity = 1;
  });
});

// 触发动画（如果页面不可见会暂存）
lazyEmitter.emit('start_animation');