jQuery代码执行顺序异常，使用$.get无法正确判断文件存在性如何解决

• $.get属于异步Ajax请求，JavaScript执行时会优先跑完所有同步代码，再处理异步请求的回调，所以你写在$.get后面的if判断会比赋值exists = true的回调更早执行，永远拿不到正确的状态。
• 404报错是请求不存在资源时浏览器的默认日志输出，属于正常行为。
• 本地打开文件失效是因为直接打开走的是file://协议，浏览器同源策略会限制该协议下的Ajax请求，只有http/https协议的服务环境支持正常调用。

适配现有写法的修改方案 #

把判断逻辑移到请求的回调内部，同时改用HEAD请求减少不必要的资源加载，也能避免下载完整文件带来的额外开销：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("#myInput").keyup(function(event){
        var keycode = event.keyCode || event.which;
        if(keycode == 13){
            var filename = "folder/document.html";
            $.ajax({
                url: filename,
                type: 'HEAD',
                success: function() {
                    alert('should be displayed first');
                    alert('This file exists!');
                    // 文件存在时的所有逻辑写在这里
                },
                error: function() {
                    alert('This file does not exist!');
                    // 文件不存在时的所有逻辑写在这里
                }
            });
        }
    });
});
</script>
</head>
<body>
<span id="myInput" role="textbox" contenteditable></span>
</body>

无jQuery依赖的原生方案 #

可以用Fetch API配合async/await实现更简洁的同步写法，不需要引入额外依赖：

// 封装检测方法
async function checkFileExists(url) {
    try {
        const res = await fetch(url, { method: 'HEAD' });
        return res.ok;
    } catch {
        return false;
    }
}

// 业务逻辑调用
document.querySelector('#myInput').addEventListener('keyup', async function(event) {
    const keycode = event.keyCode || event.which;
    if (keycode === 13) {
        const exists = await checkFileExists('folder/document.html');
        if (exists) {
            alert('文件存在');
            // 存在逻辑
        } else {
            alert('文件不存在');
            // 不存在逻辑
        }
    }
});

本地测试兼容方案 #

直接打开本地HTML文件无法运行Ajax请求，本地调试可以启动静态服务：

• 使用VS Code的用户可以安装Live Server插件，右键HTML文件选择「Open with Live Server」自动启动本地服务
• 已安装Node.js的用户可以全局安装http-server依赖，在项目目录执行http-server命令启动服务，通过返回的本地地址访问即可

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