jQuery中DOMContentLoaded后执行异步AJAX请求的正确方式

嘿，我来帮你理清这个问题！你想要的是让广告AJAX请求在页面DOM渲染完成后再发起，而且是低优先级不阻塞页面加载，但现在发现请求好像提前触发了，对吧？

首先得搞清楚为什么$.when()没起作用——你写$.when($.getJSON(...))的时候，$.getJSON()已经立刻发起请求了！$.when()只是用来监听这个请求的完成状态，然后执行后续的then()回调，它根本没改变请求发起的时机，这就是为什么你觉得请求还是提前跑了。

那怎么解决呢？给你两个靠谱的方案：

方案一：用setTimeout把请求放到事件队列末尾 #

把广告请求包裹在setTimeout里，哪怕延迟0毫秒也行。这会让浏览器先把当前的DOM渲染任务处理完，再去执行这个AJAX请求：

$(document).ready(function() {
    // 先处理你的其他DOM相关逻辑
    setTimeout(function() {
        $.getJSON("/cgi-bin/links/spots_load_new.cgi", { 
            catid: category_id, 
            linkid: link_id, 
            t: temp_set 
        }, function(results) { 
            showSpots(results); 
        });
    }, 0);
});

这里的0毫秒不是真的等0秒，而是告诉浏览器：“先把手里的渲染活干完，再来处理这个请求”，完美避开DOM渲染的阻塞。

方案二：用requestIdleCallback做真正的低优先级任务（推荐） #

这个API是专门为低优先级任务设计的，只有当浏览器彻底空闲下来，没有渲染、布局等任务的时候，才会执行回调里的请求，完全不会影响页面加载速度：

$(document).ready(function() {
    // 先处理你的其他DOM相关逻辑
    if ('requestIdleCallback' in window) {
        requestIdleCallback(function() {
            $.getJSON("/cgi-bin/links/spots_load_new.cgi", { 
                catid: category_id, 
                linkid: link_id, 
                t: temp_set 
            }, function(results) { 
                showSpots(results); 
            });
        });
    } else {
        // 给不支持这个API的旧浏览器做降级处理
        setTimeout(function() {
            $.getJSON("/cgi-bin/links/spots_load_new.cgi", { 
                catid: category_id, 
                linkid: link_id, 
                t: temp_set 
            }, function(results) { 
                showSpots(results); 
            });
        }, 100);
    }
});

这样调整后，广告请求就会乖乖等DOM渲染完成、浏览器空闲的时候再发起，完全符合你要的低优先级需求啦！

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