jQuery异步请求场景下加载动画执行顺序异常求助

你遇到的问题核心是Ajax请求默认是异步执行的——代码执行到$.ajax()时，浏览器会发起请求，但不会停下来等服务器返回结果，而是直接往下执行隐藏spinner的代码，所以动画刚显示就被关掉了。

要实现你预期的执行顺序，只需把隐藏动画的逻辑放到Ajax请求完成的回调函数里，具体方案如下：

修改后的JavaScript代码 #

function onSelectChange(){
    // 显示加载动画
    $("#spinner").show();
    
    $.ajax({
        type: "GET",
        url: "loadpreise.php?artikelnummer="+artikelnummer+"&veredelung="+veredelung+"&menge="+menge,
        success: function(data){
            $('#ziel').empty().html(data);
            // 请求成功后隐藏动画
            $("#spinner").hide();
        },
        error: function(){
            // 请求失败也隐藏动画，避免一直显示
            $("#spinner").hide();
            // 可选：添加错误提示，提升用户体验
            alert("数据加载失败，请重试");
        }
    });
}

关键说明 #

• 用jQuery的show()和hide()方法替代手动操作style属性，代码更简洁且不易出错：show()自动移除display:none显示元素，hide()自动添加display:none隐藏元素
• 把隐藏动画的代码移到success回调中，确保只有当数据加载完成后才隐藏动画
• 新增error回调，处理请求失败的场景，避免动画一直停留在页面上
• 将$('#ziel').empty(); $('#ziel').html(data);合并为链式调用，精简代码

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