如何用jQuery显示隐藏元素？点击按钮后加载图标无法显示的问题

兄弟你猜的完全对！浏览器就是这个逻辑——它会先把当前同步执行的脚本全部跑完，才会进行页面重绘更新显示。所以你刚移除加载图标的hidden类，紧接着就执行AJAX请求（哪怕是异步请求，当前同步代码块也会先执行完），导致浏览器根本没机会渲染出加载图标，就又被你重新加上了hidden类，自然看不到它出现。

下面给你两个实用的解决办法：

方法一：用setTimeout给浏览器腾重绘时间 #

把AJAX请求放到setTimeout回调里，哪怕延迟设成0，也能让浏览器先完成DOM更新（显示加载图标），再执行后续的请求逻辑：

// 按钮点击事件处理
$('button').click(function() {
  // 显示加载图标
  $('.busy-icon').removeClass('hidden');
  
  // 让出重绘时间，再执行AJAX
  setTimeout(function() {
    $.ajax({
      url: '你的数据接口地址',
      method: 'GET', // 或POST，根据你的接口来
      success: function(data) {
        // 把拿到的数据展示到页面上
        $('#data-container').html(data);
      },
      complete: function() {
        // 不管请求成功还是失败，都隐藏加载图标
        $('.busy-icon').addClass('hidden');
      }
    });
  }, 0);
});

这里的核心是setTimeout会把回调函数放到事件队列的末尾，让浏览器先处理完当前的DOM变更，再去执行AJAX请求。

方法二：用requestAnimationFrame精准控制重绘时机 #

如果想更贴合浏览器的渲染周期，可以用requestAnimationFrame，它会在浏览器下一次重绘前触发回调，嵌套一次就能确保重绘完成后再执行AJAX：

$('button').click(function() {
  $('.busy-icon').removeClass('hidden');
  
  requestAnimationFrame(function() {
    requestAnimationFrame(function() {
      $.ajax({
        url: '你的数据接口地址',
        method: 'GET',
        success: function(data) {
          $('#data-container').html(data);
        },
        complete: function() {
          $('.busy-icon').addClass('hidden');
        }
      });
    });
  });
});

第一次requestAnimationFrame会在重绘前执行，第二次则会在重绘完成后触发，完美保证加载图标已经显示出来再发起请求。

额外提醒 #

• 一定要把隐藏加载图标的逻辑放在complete回调里，而不是只放在success里！这样就算请求失败了，加载图标也会被隐藏，不会一直挂在页面上。
• 如果你用原生JS而不是jQuery，逻辑完全一样：移除类后用setTimeout或requestAnimationFrame包裹你的AJAX代码就行。

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