Question

我必须制作动画，以模仿用户等待结果。这是我的JS代码：

<script type="text/javascript">
    $(document).ready(function () {
        $("#loadingDiv").hide();
    })
</script>
<script type="text/javascript">
    $(function () {
        $("#numb").on('keyup', function () {
            Search(function (){
                $("#loadingDiv").hide();
            });
        });

        $("#desc").on('keyup', function () {
            Search(function () {
                $("#loadingDiv").hide();
            });
        });

        function Search() {
            var nr = $("#numb").val();
            var desc = $("#desc").val();

            $.get('@Url.Action("CircumstanceFiltering", "Administration")', { 
                nr: nr, 
                desc: desc     
            }, function (data) {
                $("#loadingDiv").show().delay(2000);
                $("#result").html(data);
            });
        }
    });
</script>

这似乎是正确的，但我无法理解，为什么在$("#loadingDiv").hide();完成后Search()的部分不会触发？标记的一部分：

<div id='loadingDiv'>
    Please wait...  
    <img src='~/Content/themes/custom/images/ajax-loader.gif' />
</div>

Search()函数本身效果很好，唯一的例子是搜索完成后我无法隐藏这个动画。

Answer 1

您实际上并未使用您为Search()功能提供的匿名功能。在这种情况下它也是多余的，因为两个函数都做同样的事情。显示加载指示符的逻辑似乎也是向后的，因为您在请求开始时隐藏它，并在停止时显示它。试试这个：

<script type="text/javascript">
    $(function () {
        $("#loadingDiv").hide();    
        $("#numb, #desc").on('keyup', Search);

        function Search() {
            var nr = $("#numb").val();
            var desc = $("#desc").val();

            $("#loadingDiv").show();

            // you can delay the request by 2 seconds using setTimeout, but I strongly
            // suggest you don't do this. It will just annoy your users.
            setTimeout(function() {
                $.get('@Url.Action("CircumstanceFiltering", "Administration")', { 
                    nr: nr, 
                    desc: desc 
                }, function (data) {
                    $("#loadingDiv").hide();                         
                    $("#result").html(data);
                });
            }, 2000);
        }
    });
</script>

Answer 2

在调用$("#loadingDiv").show()之前放置$.get(..)并将.hide()置于函数done（）中 - 应该修复它

            $("#loadingDiv").show();
            $.get('@Url.Action("CircumstanceFiltering", "Administration")', { nr: nr, desc: desc }, function (data) {
            $("#loadingDiv").hide().delay(2000);

Answer 3

您实际上正在传递回调。但从不称呼它。你应该显示＆＃34; loader＆＃34;在$ .get之前，你应该隐藏（调用回调）。因此，请尝试使用以下内容修改搜索。

 function Search(fnCallback) {

        $("#loadingDiv").show();

        var nr = $("#numb").val();
        var desc = $("#desc").val();

        $.get('@Url.Action("CircumstanceFiltering", "Administration")', { nr: nr, desc: desc }, function (data) {

            $("#result").html(data);
             fnCallback.call();
              //OR 
            $("#result").html(data).promise().done(function(){
                   fnCallback.call();
                  //fnCallback will be get called when data is completely rendered in the page
           });

        });

等待结果时的动画

3 个答案: