uniapp的uni.$once()重复接受
时间: 2023-05-24 07:07:19 浏览: 1261
uni.$once()是监听一次事件,当事件被触发后,监听器就会被移除。因此,如果多次调用uni.$once()来监听同一个事件,只有第一次被触发的事件会被处理,后续被忽略。如果需要多次处理同一个事件,应使用uni.$on()来注册事件监听器。
相关问题
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]。
uni.$once 用法
### 关于 `uni.$once` 的使用说明
`uni.$once` 是 UniApp 提供的一种事件监听方法,其特点是仅允许事件被触发一次。一旦绑定的事件被触发后,该监听器会自动移除[^2]。
以下是关于 `uni.$once` 的具体用法以及示例代码:
#### 基本语法
```javascript
uni.$once(eventName, callback);
```
- **eventName**: 字符串类型,表示要监听的事件名称。
- **callback**: 函数类型,当指定事件发生时执行的回调函数。
---
#### 示例场景:父组件向子组件传递数据并只响应一次
假设有一个需求,在页面加载完成后,通过全局事件机制通知某个组件更新状态,并且只需要处理这一次的通知即可。
##### 页面 (Parent.vue)
在页面初始化时,发送一个全局事件:
```javascript
<template>
<view>这是父页面</view>
</template>
<script>
export default {
onLoad() {
setTimeout(() => {
console.log('页面加载完成,发送消息');
uni.$emit('updateStatus', '已完成'); // 发送事件
}, 2000); // 模拟延迟操作
}
};
</script>
```
##### 组件 (Child.vue)
在组件中使用 `uni.$once` 来接收这个事件,并确保它只会被执行一次:
```javascript
<template>
<view>这是子组件</view>
</template>
<script>
export default {
mounted() {
uni.$once('updateStatus', message => {
console.log('接收到的消息:', message); // 输出: 接收到的消息: 已完成
this.status = message;
});
},
data() {
return {
status: ''
};
}
};
</script>
```
在这个例子中,`uni.$once` 被用来监听名为 `'updateStatus'` 的事件。由于它是单次监听器,因此即使后续再次触发相同事件,也不会再执行对应的回调函数。
---
#### 注意事项
1. 如果需要多次监听同一事件,则应改用 `uni.$on()` 方法替代 `uni.$once()`[^1]。
2. 当不再需要某些事件监听器时,建议手动解除绑定以释放内存资源。对于一次性监听器而言,无需特别清理,因为它会在首次触发后自动销毁。
---
### 总结
通过上述介绍可知,`uni.$once` 非常适合那些只需响应单一时间点信号的应用场合,比如初始化配置同步或者异步流程结束后的通知等。
阅读全文
相关推荐















