Ajax表单输出中Progress Bar失效卡顿问题求助

问题原因 #

你的进度条动画脚本在页面首次加载时仅执行一次，只会绑定当时DOM中存在的.progress、.progress-bar元素。而通过Ajax动态插入的新进度条元素，不会被原有脚本识别和处理，导致直接显示最终状态，没有动画过程。

解决方案 #

将进度条动画逻辑封装为可复用函数，每次Ajax成功插入新内容后，针对新生成的DOM元素调用该函数，确保动态加载的进度条能触发动画。

修改后的代码 #

Form.htm

<html>
<head>
    <!-- 进度条样式：开始 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
    .progress,
    .alert {margin: 8px;}   
    .alert {display: none;} 
    .alert-success {
        --bs-alert-color: #2c4238;
        --bs-alert-bg: #f8faff;
        --bs-alert-border-color: #768478;
        width: auto;
        max-width: max-content;
    }   
    @media screen and (max-width: 1568px) {
        .alert-success {
            width: auto;
            max-width: max-content;
        }
    }
    </style>
</head>
<!-- 进度条样式：结束 -->

<body><br>
    <!-- 表单：开始 -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <form class="form" action="process.php" method="POST" name="checkaddress" id="checkaddress">
    <input type="text" name="v" /> <input type="submit" id="submit" value="Submit" /> 
    </form>
    <!-- 表单：结束 -->
    
    <!-- Ajax输出容器 -->
    <div class="done"></div>
    
    <!-- 示例进度条：开始 -->
    <br>====================================
    <br> 示例：下方的进度条代码可正常运行
    <br>
    <div class='progress col-md-7 ps-0 pe-0'>
        <div class='progress-bar' role='progressbar' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100' style='width: 0%;'></div>
    </div>
    <div class='alert alert-success' role='alert'>hello xxxxx</div><br>
    <!-- 结束 -->
    
    
    <!-- 表单Ajax脚本：开始 -->
    <script>
    $('#checkaddress').on('submit', function(e) {
        var dataToPassToAjax = $(this).serialize();
        $.ajax({
            url: "process.php",
            type: "POST",
            data: dataToPassToAjax,
            cache: false,
            success: function(resultHtml) {
                // 插入返回的HTML
                $('.done').html(resultHtml).fadeIn('slow');
                // 初始化新插入的进度条动画
                initProgressBar('.done');
            }
        });
        return false;
    });
    </script>
    <!-- 结束 -->
    
    <!-- 进度条动画函数：开始 -->
    <script>
    // 封装进度条动画逻辑，接受容器选择器作为参数
    function initProgressBar(containerSelector) {
        var $progress = $(containerSelector).find('.progress');
        var $progressBar = $(containerSelector).find('.progress-bar');
        var $alert = $(containerSelector).find('.alert');
        
        // 重置进度条初始状态
        $progressBar.css('width', '0%');
        $progress.show();
        $alert.hide();
        
        // 执行动画序列
        setTimeout(function() {
            $progressBar.css('width', '10%');
            setTimeout(function() {
                $progressBar.css('width', '30%');
                setTimeout(function() {
                    $progressBar.css('width', '45%');
                    setTimeout(function() {
                        $progressBar.css('width', '80%');
                        setTimeout(function() {
                            $progressBar.css('width', '90%');
                            setTimeout(function() {
                                $progressBar.css('width', '95%');
                                setTimeout(function() {
                                    $progressBar.css('width', '98%');
                                    setTimeout(function() {
                                        $progressBar.css('width', '99%');
                                        setTimeout(function() {
                                            $progressBar.css('width', '100%');
                                            setTimeout(function() {
                                                $progress.hide();
                                                $alert.show();
                                            }, 500);
                                        }, 500);
                                    }, 800);
                                }, 600);
                            }, 700);
                        }, 900);
                    }, 600);
                }, 400);
            }, 700);
        }, 800);
    }
    
    // 页面加载时初始化示例进度条
    $(document).ready(function() {
        initProgressBar('body');
    });
    </script>
    <!-- 结束 -->
</body>
</html>

process.php（可选调整初始宽度为0，更贴合动画逻辑）

<?php 
$v= $_POST['v'];
echo "<div class='progress col-md-7 ps-0 pe-0'> 
<div class='progress-bar' role='progressbar' aria-valuenow='0' aria-valuemin='0' 
aria-valuemax='100' style='width: 0%;'></div>  
</div>
<div class='alert alert-success' role='alert'>hello $v</div>";
?>

关键修改说明 #

1. 封装动画为函数：将原有的嵌套setTimeout逻辑封装成initProgressBar函数，通过容器选择器指定要处理的元素范围，避免干扰页面上的其他进度条。
2. Ajax回调触发动画：在Ajax请求成功插入HTML后，调用initProgressBar('.done')，仅处理动态加载的进度条元素。
3. 重置初始状态：每次执行动画前重置进度条宽度为0、显示进度条、隐藏提示框，确保动画从初始状态开始。
4. 页面加载初始化示例：通过$(document).ready调用函数，保持原有示例进度条的动画效果。

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