如何让setInterval函数首次执行无延迟？

问题根源是你当前仅通过setInterval触发请求，首次执行要等250毫秒才会发起请求，导致页面初始状态为空。直接按下面的方式修改，就能实现首次无延迟加载，之后后台自动刷新：

修改后的完整代码 #

<script>
function ajax() { 
    var request = null; 
    // 创建XMLHttpRequest对象
    if (window.XMLHttpRequest) { 
        request = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
        request = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    if(request) { 
        request.open("GET", "troops.php"); 
        // 仅在请求成功完成时更新内容
        request.onreadystatechange = function () { 
            // 判断请求状态：readyState=4表示请求完成，status=200表示请求成功
            if (request.readyState === 4 && request.status === 200) {
                document.getElementById("main").innerHTML = request.responseText; 
            }
            // 可选：添加请求失败的处理逻辑
            else if (request.readyState === 4 && request.status !== 200) {
                document.getElementById("main").innerHTML = "加载失败，请稍后重试";
            }
        } 
        request.send(null); 
    }
}

// 页面加载后立刻执行一次ajax，消除首次延迟
ajax();
// 用函数引用代替字符串，避免eval解析的隐患
setInterval(ajax, 250);
</script>

<div id="main"></div>

关键改动说明 #

• 手动触发首次请求：在setInterval之前直接调用ajax()，页面加载时立刻发起请求，首次内容无延迟显示
• 修复请求状态判断：原代码没有判断readyState和status，可能会在请求未完成或失败时更新内容，导致显示异常
• 优化定时器调用：将setInterval("ajax()",250)改为setInterval(ajax, 250)，避免字符串解析带来的性能损耗和安全风险

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