面试题：Svelte自定义事件性能优化与特殊场景处理

优化自定义事件触发频率

防抖（Debounce）：

原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。这样可以确保在短时间内多次触发事件时，实际执行回调的次数大大减少。
实现：在Svelte中，可以使用setTimeout来实现防抖。例如，假设在组件中有一个自定义事件myEvent，在触发该事件的函数中添加防抖逻辑：

<script>
  let timer;
  function handleMyEvent() {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      // 实际执行的自定义事件逻辑
      console.log('Debounced custom event');
      // 触发自定义事件
      const event = new CustomEvent('myEvent');
      document.dispatchEvent(event);
    }, 300);
  }
</script>
<button on:click={handleMyEvent}>触发自定义事件</button>

节流（Throttle）：

原理：规定在一个单位时间内，只能触发一次事件。无论在这个单位时间内触发了多少次事件，都只会执行一次回调。
实现：同样可以利用setTimeout来实现节流。比如，还是以myEvent自定义事件为例：

<script>
  let canTrigger = true;
  function handleMyEvent() {
    if (!canTrigger) {
      return;
    }
    canTrigger = false;
    // 实际执行的自定义事件逻辑
    console.log('Throttled custom event');
    // 触发自定义事件
    const event = new CustomEvent('myEvent');
    document.dispatchEvent(event);
    setTimeout(() => {
      canTrigger = true;
    }, 300);
  }
</script>
<button on:click={handleMyEvent}>触发自定义事件</button>

事件委托：

原理：将事件绑定到祖先元素上，利用事件冒泡机制，当后代元素触发事件时，祖先元素可以接收到该事件。这样可以减少事件绑定的数量，提高性能。
实现：假设在一个列表中有多个子元素，每个子元素都可能触发同一个自定义事件。可以将事件绑定到列表的父元素上：

<script>
  function handleParentClick(event) {
    if (event.target.tagName === 'LI') {
      // 处理自定义事件逻辑
      console.log('Custom event from list item');
      // 触发自定义事件
      const customEvent = new CustomEvent('myListItemEvent');
      event.target.dispatchEvent(customEvent);
    }
  }
</script>
<ul on:click={handleParentClick}>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

处理跨组件异步操作依赖场景

状态管理库（如Pinia）：

数据一致性：使用Pinia来管理共享状态。不同组件在处理自定义事件时，通过访问Pinia中的状态来保证数据一致性。例如，在一个组件中触发自定义事件后，更新Pinia中的某个状态，其他依赖该状态的组件会自动响应更新。
操作可靠性：可以在Pinia的actions中定义异步操作。这些actions可以处理自定义事件相关的异步逻辑，并且可以通过try - catch块来捕获异步操作中的错误，保证操作的可靠性。例如：

// store.js
import { defineStore } from 'pinia';
export const useMyStore = defineStore('myStore', {
  state: () => ({
    data: null
  }),
  actions: {
    async handleCustomEventAsync() {
      try {
        const response = await fetch('/api/data');
        const result = await response.json();
        this.data = result;
      } catch (error) {
        console.error('Error handling custom event:', error);
      }
    }
  }
});

在组件中：

<script>
  import { useMyStore } from './store.js';
  const myStore = useMyStore();
  function handleCustomEvent() {
    myStore.handleCustomEventAsync();
  }
</script>
<button on:click={handleCustomEvent}>触发自定义事件并执行异步操作</button>

事件总线与Promise：

数据一致性：创建一个事件总线（可以是一个简单的JavaScript对象），不同组件通过事件总线来发布和订阅自定义事件。在处理跨组件异步操作时，使用Promise来确保操作按顺序执行，从而保证数据一致性。例如：

// eventBus.js
const eventBus = {
  events: {},
  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  },
  emit(eventName, ...args) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(callback => callback(...args));
    }
  }
};
export default eventBus;

在组件A中：

<script>
  import eventBus from './eventBus.js';
  function handleCustomEvent() {
    return new Promise((resolve) => {
      // 模拟异步操作
      setTimeout(() => {
        eventBus.emit('customEvent', 'data from component A');
        resolve();
      }, 1000);
    });
  }
</script>
<button on:click={handleCustomEvent}>触发自定义事件</button>

在组件B中：

<script>
  import eventBus from './eventBus.js';
  eventBus.on('customEvent', (data) => {
    console.log('Received data from component A:', data);
    // 处理数据，保证数据一致性
  });
</script>

操作可靠性：在Promise链中使用catch来捕获异步操作中的错误，确保操作的可靠性。例如，在组件A的handleCustomEvent函数中添加错误处理：

<script>
  import eventBus from './eventBus.js';
  function handleCustomEvent() {
    return new Promise((resolve, reject) => {
      // 模拟异步操作可能出错
      setTimeout(() => {
        if (Math.random() > 0.5) {
          eventBus.emit('customEvent', 'data from component A');
          resolve();
        } else {
          reject(new Error('Async operation failed'));
        }
      }, 1000);
    });
  }
  handleCustomEvent().catch(error => {
    console.error('Error in component A:', error);
  });
</script>
<button on:click={handleCustomEvent}>触发自定义事件</button>

面试题：Svelte自定义事件性能优化与特殊场景处理

知识考点

面试题答案

优化自定义事件触发频率

处理跨组件异步操作依赖场景