如何等待 jQuery 动画？

Posted 2023-03-12

【中文标题】如何等待 jQuery 动画？

【英文标题】：How to wait for jQuery animation?

【发布时间】：2017-09-05 17:59:37

【问题描述】：

我知道这样的问题已经被问过一千次了，但我没有找到适合我的解决方案。

我有一个函数，在提交表单时调用。它检查一些表单字段并使用 ajax 将数据发送到 php 脚本。问题是，它可能需要几秒钟直到 php 完成并且我想淡入 css 动画，用户知道他应该等待。

如果表单域中有错误，动画会正确淡入淡出。但是如果字段检查没问题，大多数情况下 jQuery 会继续并调用 ajax 而不完成动画。有时动画会淡入，有时它会在几毫秒后停止，有时直到 php 脚本的答案回来之前什么都没有发生。

我如何告诉 jquery 等待 ajax 部分的执行，直到动画完成？

$(document).ready(function () 
    $('.daten_form').submit(function () 
        $("#loader-wrapper").fadeIn('normal');
        hasError = false;
        if ($('#delkfz').prop('checked',false))
            if ($('#fin').val() == '') 
                $('#fin').addClass('error_class');
                hasError = true;
            
        
        if (hasError) 
            $("#loader-wrapper").fadeOut("normal");
            $('.error_box').show();
         else 
            var einzelfz = false;
            var weiter = false;
            if ($('#einzelfz').val() == '1')
                einzelfz = true;
            if ($("#weiter").prop('checked') == true)
                weiter = true;
            var kvid = $('#kvid').val();
            $.ajax(
                type: 'POST',
                url: 'kvc_write.php',
                cache: false,
                data: $(".daten_form").serialize(),
                success: function (data) 
                    if (data == "error") 
                        $("#loader-wrapper").fadeOut("normal");
                        $('.success_box').hide();
                        $('.error_box').show();
                     else if (data == "logout") 
                        var url = "index.php?ablauf=1";
                        $(location).attr('href',url);
                     else if (data == "success" && (einzelfz || !weiter)) 
                        var url = "prepkvpdf.php?kvid="+kvid;
                        $(location).attr('href',url);
                     else 
                        $("#loader-wrapper").fadeOut("normal");
                        $('.error_box').hide();
                        $('.success_box').show();
                    
                
            );
        
        return false;
    );
);

【问题讨论】：

这段代码不完整！回调函数在哪里。 ajax完成后你在做什么？

请阅读the documentation for fadeIn并注意您可以传入的complete函数。

只是一个挑剔，但你不必写== true，你可以只断言变量，即。 if(hasError)

我尽可能地缩短了脚本（字段检查，ajax，...）因为它工作正常，在这里没关系。

调用ajax函数作为动画函数的回调。动画完成后会启动

【参考方案1】：

使用 Ajax 的最佳方式：

        $.ajax(
            data: data,
            type: "GET", //or POST
            url: "YOU-KNOW.php",
            beforeSend: function()
                //script runs when ajax send data
            ,      
            success: function(data)
                //script runs when php finish the thing and tell me data.
            
        );

【讨论】：

我刚试过，但还是一样。有时动画淡入 10%，有时什么也看不到。

我现在升级了代码。只是检查表单域的部分被缩短了。这是昨天早上的原始代码。之后我尝试的所有方法都不起作用。要么没有变化，要么这个$("#loader-wrapper").fadeIn('normal', function() if (hasError) $(".. ); 没有全部工作，但控制台上没有错误？！

究竟是什么问题？

当函数被调用时，#loader-wrapper 应该在其他任何东西开始之前淡入。如果 hasError 设置为 true，它会完全淡入，然后再次淡出。完全正确。但是如果调用了 else 部分，fadeIn 有时会起作用，但大多数情况下它要么在大约 10% 后停止，要么看不到任何效果。正如我同时发现的那样，问题可能是 jQuery 缓存，因为它在从 jQuery 1.x 更改为 3.2.0 后可以正常工作几次。但是由于 php 部分需要几秒钟才能完成，所以用户是否再等待半秒钟并不重要。

我不知道如何提供帮助。成功部分必须在 php 完成后运行，所以，动画问题必须是别的东西。你能做一个小提琴之类的在线测试吗？