uniapp uni.$on触发多次

### 防止 `uni.$on` 在 UniApp 中重复触发的方法 为了确保 `uni.$on` 不会在 UniApp 应用程序中被重复触发，可以采取以下几种方法： #### 方法一：移除旧监听器后再注册新监听器 每次重新加载页面或组件时，先移除已存在的事件监听器再创建新的监听器。这能有效避免同一事件被多次绑定。 ```javascript import { onLoad, onUnload } from '@dcloudio/uni-app'; const masterTxt = ref(''); const sale_after_id = ref(''); // 页面加载时设置监听器之前先尝试取消之前的监听 function setupListener() { uni.$off('masterSucc'); uni.$on('masterSucc', (e) => { masterTxt.value = e.masterTxt; sale_after_id.value = e.sale_after_id; }); } onLoad((options) => { setupListener(); }); onUnload(() => { // 卸载页面时清理所有监听器 uni.$off('masterSucc'); }); ``` 这种方法适用于那些可能因为生命周期原因而反复进入同一个页面的情况[^1]。 #### 方法二：使用一次性监听器 `uni.$once` 如果只需要响应一次特定事件，则可以直接采用 `uni.$once` 来代替 `uni.$on`。这样即使后续再次发出相同类型的事件也不会引起额外的动作。 ```javascript import { onLoad, onUnload } from '@dcloudio/uni-app'; const masterTxt = ref(''); const sale_after_id = ref(''); onLoad((options) => { uni.$once('masterSucc', (e) => { masterTxt.value = e.masterTxt; sale_after_id.value = e.sale_after_id; // 如果是一次性操作的话不需要手动卸载监听器 }); }); ``` 这种方式特别适合处理只希望接收首次发生的某些特殊条件下的通知消息[^3]。 #### 方法三：利用闭包保存状态变量 通过引入一个布尔型的状态标志位来控制是否应该继续执行相应的逻辑。只有当该标记为真时才允许真正意义上的函数体被执行；一旦完成任务就立即将其重置回假值以防下一轮循环误触。 ```javascript let hasBeenCalled = false; uni.$on('someEventName', () => { if (!hasBeenCalled) { console.log("This will only run once."); hasBeenCalled = true; // 执行其他必要的业务逻辑... } }); ``` 此策略对于复杂的应用场景非常有用，尤其是在涉及到多个异步流程的情况下能够很好地保护代码免受意外干扰[^4]。