vue setTimeout--延迟操作

逝水年华 · 发表于 2022-5-30 21:46:14

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

有时候我们在查询后要做某些事情，例如我查询的时候要根据某个值再去查询某些东西并和这些值一起显示的时候，我们可以对渲染数据的操作进行延迟，因为代码执行的速度是很快的而访问数据的操作相对于渲染的速度慢得多，所以往往数据还没查询到而数据就渲染完成了

setTimeout(() =>{
要延迟的代码
},延迟时间);

这种写法可以直接带入变量
变量不会因为作用域问题而无效

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-20 14:44:52

在Discuz!的Vue组件开发中处理异步数据渲染，确实需要注意执行时序的控制。根据Discuz!插件开发规范，以下是几种专业解决方案：

1. 响应式数据绑定模式

export default {
data() {
return {
primaryData: null,
secondaryData: null
}
},
methods: {
async fetchData() {
this.primaryData = await this.$store.dispatch('getPrimaryData');
this.secondaryData = await this.$store.dispatch('getSecondaryData', this.primaryData.id);
}
},
mounted() {
this.fetchData();
}
}

复制代码

关键点：利用Vue的响应式系统自动追踪依赖，当异步数据更新时会自动触发重新渲染

2. 复合查询优化方案

Promise.all([
api.getPrimaryData(),
api.getSecondaryData()
]).then(([primary, secondary]) => {
this.combinedData = this.processData(primary, secondary);
});

复制代码

适用场景：当多个数据源之间没有严格依赖关系时，通过并行请求提升加载速度

3. 精准时序控制方案

async mounted() {
const timer = setTimeout(() => {
this.showLoading = true;
}, 300);
try {
await this.loadPrimaryData();
await this.loadDependentData();
} finally {
clearTimeout(timer);
this.showLoading = false;
}
}

复制代码

亮点：配合加载状态管理，避免界面闪烁

4. 渲染优化方案

<template>
<div v-if="isDataReady">
</div>
</template>
watch: {
combinedData: {
handler(newVal) {
if (newVal) {
this.$nextTick(() => {
// DOM更新后执行的操作
});
}
},
deep: true
}
}

复制代码

优势：充分利用Vue生命周期，确保DOM操作的正确时序

5. Discuz! 特定集成方案

// 在Discuz!模板引擎中集成Vue组件
const app = new Vue({
el: '#vue-container',
created() {
this.initDiscuzData();
},
methods: {
async initDiscuzData() {
const dzData = await this.getDiscuzTemplateVars();
Object.assign(this.$data, dzData);
}
}
});

复制代码

注意事项：需要处理好Discuz!原生模板变量与Vue数据模型的融合

建议采用响应式数据绑定结合async/await的方案，这符合以下优势：
1. 代码可维护性强，时序清晰
2. 自动触发视图更新
3. 完美融入Vue生命周期
4. 便于错误处理和加载状态管理
5. 兼容Discuz!的插件扩展机制

对于需要精确控制DOM操作时序的场景，推荐使用$nextTick而不是setTimeout，这样可以确保在Vue完成DOM更新后执行操作，避免出现意外时序问题。

在Discuz!插件开发中，建议将业务逻辑封装到独立的service模块中，通过Vuex进行状态管理，这样既能保持组件简洁，也符合Discuz!的模块化开发规范。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

Discuz智能体 · 发表于 2025-3-20 14:53:02

在Discuz!的Vue组件开发中处理异步数据渲染，可采用以下两种专业方案：

方案一：基于Vue响应式特性的数据绑定

export default {
data() {
return {
primaryData: null,
secondaryData: []
}
},
methods: {
async fetchPrimaryData() {
const response = await this.$store.dispatch('getPrimaryData');
this.primaryData = response;
// 自动触发二次请求
if (this.primaryData?.keyValue) {
this.loadSecondaryData(this.primaryData.keyValue);
}
},
async loadSecondaryData(key) {
const { data } = await dzApi.post('plugin/secondary', { key });
this.secondaryData = data;
}
},
mounted() {
this.fetchPrimaryData();
}
}

复制代码

方案二：使用Vue异步更新队列优化

export default {
data() {
return {
mergedData: []
}
},
methods: {
async loadCombinedData() {
try {
const [mainRes, subRes] = await Promise.all([
dzApi.get('plugin/main'),
dzApi.get('plugin/sub')
]);
this.$nextTick(() => {
this.mergedData = this.processData(mainRes.data, subRes.data);
this.initViewComponents(); // DOM更新后初始化组件
});
} catch (error) {
this.handleDzError(error);
}
},
processData(main, sub) {
return main.map(item => ({
...item,
extra: sub.find(s => s.id === item.id)?.value || ''
}));
}
}
}

复制代码

专业建议：
1. 作用域处理：使用箭头函数保持this上下文，组件内变量通过data/props管理
2. 异步控制：优先使用async/await配合Promise.all处理并行请求
3. 响应式更新：利用Vue的$nextTick确保DOM更新后执行视图相关操作
4. 错误处理：封装统一的Discuz!接口错误处理方法
5. 性能优化：对重复操作使用防抖/节流（示例代码）：