如何在iOS端避免使用setTimeout实现锚点元素聚焦？

这问题我之前调试弹窗交互时也碰到过！明明动画回调应该在结束后执行，但focus就是不生效，反而加个setTimeout就好了，咱们来捋捋可能的原因和解决思路：

为什么回调里的focus会失效？ #

jQuery的fadeIn回调确实是在动画完成时触发，但浏览器的渲染和JS执行是在同一个事件循环里的——动画结束的瞬间，浏览器可能还没完成弹窗元素的最终重绘（比如把元素从display:none切换为block后的布局计算），这时候调用focus()，浏览器可能认为元素还没处于完全可见/可交互状态，导致聚焦失败。而setTimeout相当于把聚焦操作放到了下一个事件循环里，给了浏览器足够时间完成渲染，所以能生效。

具体解决思路 #

1. 先确认元素引用是否正确 #

先在回调里加个日志，确保$closeModal确实指向了正确的DOM元素：

var openModal = function(e) { 
  $popup.fadeIn('fast', function() {
    console.log($closeModal); // 看看输出的是不是目标元素
    $closeModal.focus();
  }); 
  e.preventDefault(); 
};

如果输出是[]或者不是目标元素，那就是选择器的问题，比如弹窗内容是动态渲染的，要确保在动画完成时元素已经存在于DOM中。

2. 强制触发浏览器重绘 #

在调用focus()前，读取元素的一个布局属性（比如offsetHeight），这会强制浏览器立刻完成当前的渲染队列，确保元素状态已经更新：

var openModal = function(e) { 
  $popup.fadeIn('fast', function() {
    // 读取offsetHeight触发重绘，void是避免不必要的变量存储
    void $closeModal[0].offsetHeight;
    $closeModal.focus();
  }); 
  e.preventDefault(); 
};

3. 改用requestAnimationFrame #

把聚焦操作放到requestAnimationFrame里，让它在下一次浏览器重绘前执行，这比固定时间的setTimeout更可靠，能精准对齐渲染时机：

var openModal = function(e) { 
  $popup.fadeIn('fast', function() {
    requestAnimationFrame(function() {
      $closeModal.focus();
    });
  }); 
  e.preventDefault(); 
};

4. 确保元素可被聚焦 #

如果$closeModal是div、span这类默认不可聚焦的元素，需要给它设置tabindex="-1"属性，让它可以通过JS调用focus()聚焦（同时不会影响正常的Tab导航顺序）：

<!-- 给关闭按钮加tabindex -->
<button id="closeModal" tabindex="-1">关闭</button>

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