使用setInterval自动更新页面时初始内容加载延迟如何解决

现有页面自动更新代码运行正常，但存在初始加载延迟问题：页面首次打开时需要等待40秒才会展示拉取到的内容，需要调整代码实现：页面初始加载时立即展示拉取内容，之后每隔40秒自动更新。
原有代码如下：

$(document).ready(function(){
    jQuery(window).on("load", function(){
        refreshInterval = setInterval(function(){
            $('#box').load('handle.php');
        },40000);
    });
});

setInterval的执行规则是：注册定时器后，会先等待设定的间隔时长，才会第一次执行传入的回调函数。原有代码仅将内容拉取逻辑放在定时器回调中，没有做首次触发，因此第一次内容拉取需要等满40秒才会执行。
另外原有代码嵌套绑定$(document).ready和window.load事件属于冗余逻辑：window.load需要等待页面所有资源（包括图片、外部样式、音视频等）全部加载完成才会触发，会额外拉长首次内容拉取的等待时间。

将内容拉取逻辑抽为独立函数，初始化时先手动调用一次完成首屏内容加载，再启动定时器执行后续定时刷新即可，优化后代码：

$(function() {
    // 抽离公共的内容加载逻辑
    const fetchAndRenderContent = () => $('#box').load('handle.php');
    // DOM就绪后立即拉取首屏内容
    fetchAndRenderContent();
    // 启动40秒间隔的定时刷新任务
    const refreshInterval = setInterval(fetchAndRenderContent, 40000);
});

如果业务要求必须等页面所有静态资源加载完成后再拉取动态内容，只需要把首次调用fetchAndRenderContent、启动定时器的逻辑放到window.load回调内即可，依然可以实现首次立即加载、后续定时刷新的效果。

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