0

我使用以下建议开发了一个微调器：

http://blog.oio.de/2010/11/08/how-to-create-a-loading-animation-spinner-using-jquery/

当我什么都不做但让它运行而不试图隐藏它时，微调器工作。

但是我将微调器嵌入到函数中作为代码的书挡。我在开头展示它，并在结尾处结束它。但它永远不会显示，即使我加载了足够的数据以使延迟超过一秒。

这是代码：

    function SortListByDistance(SortReferenceLatitude, SortReferenceLongitude)
    {
        $("#SpinnerControl").show();

        $(".RetailerSearchSectionLine").each(function()
        {
            var SortLocationLatitude = $(".RetailLocationLatitude", $(this)).text();
            var SortLocationLongitude = $(".RetailLocationLongitude", $(this)).text();
            var DistanceFromReferenceLocation = CalculateDistance(SortReferenceLatitude, SortReferenceLongitude, SortLocationLatitude, SortLocationLongitude);
            $(this).data("DistanceFromReferenceLocation", DistanceFromReferenceLocation);
        });

        var TransferArray = $("#RetailerSearchSectionBody ul li").toArray().sort(function(a, b)
        {
            var distance1 = $(a).data("DistanceFromReferenceLocation");
            var distance2 = $(b).data("DistanceFromReferenceLocation");
            return (distance1 - distance2);
        });

        $("#RetailerSearchSectionBody ul").append(TransferArray);
        $("#RetailerSearchSectionBody").scrollTop(0);

        $("#SpinnerControl").hide();
    }

谁能告诉我为什么节目没有渲染？提前感谢您的帮助。

4

2 回答 2

1

问题是在代码完成执行之前不会对屏幕进行任何可见的更改。完成后，该元素已被隐藏，因此您永远看不到它。如果您的意图是在代码执行时显示元素，请使用setTimeout：

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

setTimeout(function(){
    // do you stuff here

    $("#SpinnerControl").hide();
}, 1);
于 2012-05-18T19:09:22.933 回答
1

对于某些浏览器，您需要将控制权交还给浏览器才能更新 UI。通常在 Firefox 中不是问题，但在 Chrome/IE 中...

我建议使用超时让浏览器也能正常工作（请记住，这会导致SortListByDistance异步）：

function SortListByDistance(SortReferenceLatitude, SortReferenceLongitude)
{
    $("#SpinnerControl").show();

    setTimeout( function( ) {
        $(".RetailerSearchSectionLine").each(function()
        {
            var SortLocationLatitude = $(".RetailLocationLatitude", $(this)).text();
            var SortLocationLongitude = $(".RetailLocationLongitude", $(this)).text();
            var DistanceFromReferenceLocation = CalculateDistance(SortReferenceLatitude, SortReferenceLongitude, SortLocationLatitude, SortLocationLongitude);
            $(this).data("DistanceFromReferenceLocation", DistanceFromReferenceLocation);
        });

        var TransferArray = $("#RetailerSearchSectionBody ul li").toArray().sort(function(a, b)
        {
            var distance1 = $(a).data("DistanceFromReferenceLocation");
            var distance2 = $(b).data("DistanceFromReferenceLocation");
            return (distance1 - distance2);
        });

        $("#RetailerSearchSectionBody ul").append(TransferArray);
        $("#RetailerSearchSectionBody").scrollTop(0);

        $("#SpinnerControl").hide();
    }, 1 );
}
于 2012-05-18T19:09:24.190 回答