安全 NextTick

相关方法

说明

secureNextTick 是一个增强版的 nextTick。

它在 nextTick 之后增加了一个微小的延时（默认 10ms），以确保 DOM 更新完全完成。这在处理一些复杂的 DOM 渲染或需要等待浏览器重绘的场景中非常有用。

类型定义

// 安全的 nextTick
function secureNextTick(fn?: () => void): Promise<void>;

参数说明

secureNextTick

参数	类型	默认值	说明
fn	() => void	-	可选的回调函数，在延时结束后执行

代码示例

基础用法

import { secureNextTick } from '@vue3-simple-bui/platform';

// 方式一：使用 async/await
const updateDom = async () => {
  // ... 修改数据 ...

  // 等待 DOM 完全更新
  await secureNextTick(); 

  // 执行 DOM 操作
  const el = document.getElementById('my-element');
  console.log(el?.offsetHeight);
};

// 方式二：传入回调函数
const updateDomWithCallback = () => {
  // ... 修改数据 ...

  secureNextTick(() => {
    // DOM 更新完成后执行
    console.log('DOM updated');
  });
};