如何利用jQuery Promise保证DOM元素操作按指定顺序执行？

嘿，这个问题其实挺常见的——不是代码执行顺序的锅，而是浏览器渲染时机的小坑！

首先得澄清一个点：$(this).addClass('unavailable')本身是同步执行的，代码层面上它一定会在$(this).html('00')之前完成，DOM里的类名会立刻更新。你看到的"先设置内容导致显示难看"，本质是浏览器的渲染异步性——DOM更新后，浏览器不会立刻重绘，要等到当前任务队列结束后才会处理渲染。所以虽然类已经加上了，但样式还没来得及应用，就修改了内容，导致视觉上出现异常。

那怎么用Promise确保视觉上的顺序呢？我们需要等浏览器完成一次渲染后，再执行修改内容的操作，这里可以结合requestAnimationFrame来实现：

方案1：Promise + requestAnimationFrame #

// 先同步添加类
$(this).addClass('unavailable');

// 用Promise等待下一帧渲染完成
new Promise(resolve => requestAnimationFrame(resolve))
  .then(() => {
    // 此时类的样式已经被应用，再修改内容
    $(this).html('00');
  });

方案2：async/await 写法（更直观） #

如果你的代码环境支持async函数，这种写法可读性更强：

async function updateTargetElement(el) {
  const $el = $(el);
  // 第一步：添加类
  $el.addClass('unavailable');
  // 等待浏览器完成一次渲染
  await new Promise(resolve => requestAnimationFrame(resolve));
  // 第二步：修改内容
  $el.html('00');
}

// 调用函数
updateTargetElement(this);

额外情况：如果是CSS过渡动画导致的问题 #

如果你的unavailable类带有过渡动画（比如opacity、transform之类的），那你可能需要等待过渡完全结束后再修改内容，这时候可以监听transitionend事件，结合Promise封装：

function waitForTransition($el) {
  return new Promise(resolve => {
    // 只监听一次过渡结束事件
    $el.one('transitionend', (e) => {
      // 可以指定等待特定属性的过渡，比如只等opacity
      if (e.propertyName === 'opacity') {
        resolve();
      }
    });
  });
}

// 使用方式
const $el = $(this);
$el.addClass('unavailable');
waitForTransition($el).then(() => {
  $el.html('00');
});

简单来说，核心就是等浏览器把类的样式渲染出来后，再修改内容，Promise在这里的作用是把异步的渲染/过渡事件转换成更易管理的链式调用（或async/await）。

内容的提问来源于stack exchange，提问作者Scoob