为何console.log与alert返回值不同？（获取left计算样式场景）

问题描述 #

当屏幕宽度≤1490px时，通过jQuery获取.sidebar元素的left计算样式，发现alert()和console.log()返回结果不一致。

相关代码 #

JavaScript

$(document).ready(function() {
  const smallDevice = window.matchMedia("(max-width: 1490px)");
  smallDevice.addListener(handleDeviceChange);

  function handleDeviceChange(e) {
    if (e.matches) {
      const left = $(".sidebar").css("left");
      alert(left);
      console.log(left);
    }
  }
});

CSS

@media (max-width: 1490px) {
  .sidebar2 {
    right: -300px !important;
  }
  .sidebar {
    left: -300px !important;
  }
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside class="sidebar" id="sidebar">
  <ul class="sidebar-nav" id="sidebar-nav">
    <li class="nav-item">
      <a class="nav-link">
        <img class="logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3pZ-gZavZ--zmy5TluKQHw-5aKDXYlrnnbQ&usqp=CAU" />
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link">
        <i class="bi- bi-calendar-event "></i>
        <span>الأحداث</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link">
        <i class="bi- bi-newspaper "></i>
        <span>الأخبار</span>
      </a>
    </li>
  </ul>
</aside>

<aside class="sidebar2" id="sidebar2">
  <ul class="sidebar-nav" id="sidebar-nav">
    <li class="nav-item">
      <a class="nav-link">
        <img class="logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3pZ-gZavZ--zmy5TluKQHw-5aKDXYlrnnbQ&usqp=CAU" />
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link">
        <i class="bi- bi-calendar-event "></i>
        <span>الأحداث</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link">
        <i class="bi- bi-newspaper "></i>
        <span>الأخبار</span>
      </a>
    </li>
  </ul>
</aside>

原因分析 #

alert()是同步阻塞式弹窗，会暂停浏览器所有执行流程——包括样式计算和页面渲染。当媒体查询回调触发时，浏览器可能还没完成.sidebar元素的样式更新，此时alert()获取的是旧的left值；等用户关闭alert()后，浏览器才完成样式计算，后续执行的console.log()就拿到了更新后的正确值，导致两者结果不一致。

解决方案 #

等待浏览器完成重绘和样式计算后再获取属性值，有两种常用方式：

方式1：使用requestAnimationFrame

利用该API等待浏览器下一次重绘前执行回调，确保样式已完全应用：

$(document).ready(function() {
  const smallDevice = window.matchMedia("(max-width: 1490px)");
  smallDevice.addListener(handleDeviceChange);

  function handleDeviceChange(e) {
    if (e.matches) {
      requestAnimationFrame(() => {
        const left = $(".sidebar").css("left");
        alert(left);
        console.log(left);
      });
    }
  }
});

方式2：使用setTimeout延迟执行

将获取样式的逻辑放到下一个事件循环，等待当前渲染任务完成：

$(document).ready(function() {
  const smallDevice = window.matchMedia("(max-width: 1490px)");
  smallDevice.addListener(handleDeviceChange);

  function handleDeviceChange(e) {
    if (e.matches) {
      setTimeout(() => {
        const left = $(".sidebar").css("left");
        alert(left);
        console.log(left);
      }, 0);
    }
  }
});

额外建议 #

调试时优先使用console.log()而非alert()，避免阻塞页面流程导致的异步渲染问题。

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