jqueryshow然后隐藏在beween中的代码，show not rendering

我使用以下建议开发了一个旋转器：

当我什么也不做，只是让它运行而不试图隐藏它时，旋转器就工作了

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

代码如下：

    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();
    }

---

有谁能告诉我为什么这场演出不成功？提前感谢您的帮助。

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

setTimeout

：

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

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

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

---

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

我建议使用超时让浏览器也能正常工作（请记住，这会使

SortListByDistance

异步）：

---

设置超时的问题是不能保证代码已经执行。答案与上面相同。见评论。谢谢你，詹姆斯。@laymanje：我相信在线程传递给setTimeout函数之前，show代码已经执行了，因为JS不是aysnch。问题是浏览器何时才能赶上自己。其他问答已经表明，setTimeout为浏览器提供了一个喘息的机会，它可以用来渲染那些等待代码块执行的内容。谢谢你，Ryan。跟后面的建议一样（谢谢你，詹姆斯）。这两种方法都有效，并添加了以下信息：在ms parm曝光后，微调器停止旋转（我将其增加到100ms）。但它表明了这一点。因此，正是因为JS不是异步的，所以只要排序例程启动，微调器就停止旋转，但保持在屏幕上。因此，我想我将使用静态图像/文本组合来完成我想要做的事情。微调器是为ajax调用而设计的。这不是ajax，因此显示了单线程行为。谢谢你给我指路。

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 );
}