Javascript：只是无法获取加载的GIF来显示_Javascript_Sleep_Show Hide

Javascript：只是无法获取加载的GIF来显示

javascript

Javascript：只是无法获取加载的GIF来显示,javascript,sleep,show-hide,Javascript,Sleep,Show Hide,我不是很精通javascript，但我认为我做的事情很简单我有一个HTML文件，可以在浏览器中运行，因为在使用过程中无法访问wifi或手机。我使用javascript只是为了尽量减少所需的资源它搜索大约6500条记录并返回匹配项。这在android上运行很好（1到2秒），但iPad3（只有我必须测试的IOS）大约需要30秒，所以我想添加一个“搜索DIV”来显示它正在运行我创建了一个简单的测试来尝试这个out-sleep循环，并为我的搜索消息创建了一个show/hide div 搜索DIV从

我不是很精通javascript，但我认为我做的事情很简单

我有一个HTML文件，可以在浏览器中运行，因为在使用过程中无法访问wifi或手机。我使用javascript只是为了尽量减少所需的资源

它搜索大约6500条记录并返回匹配项。这在android上运行很好（1到2秒），但iPad3（只有我必须测试的IOS）大约需要30秒，所以我想添加一个“搜索DIV”来显示它正在运行

我创建了一个简单的测试来尝试这个out-sleep循环，并为我的搜索消息创建了一个show/hide div

搜索DIV从未见过，我不明白，为什么睡眠循环完成后，进度消息不会以1秒的间隔显示，而是同时显示

我显然误解了一些内部流程

<style>
    #LoadingGIF { z-index: 100;
    position: absolute;
    top: 50%; left: 50%;
    margin-top: -100px ; margin-left: -100px;
    display: none; }

</style>
<title>tutSleep</title>

</head>

<body>
    <h1>Sleep and Searching message test</h1>
    <div id="process">

    </div>
    <div id="LoadingGIF">
        Searching for your matches  
</div>
<!--    <img id="LoadingGIF" src="Loading.gif" />
--> 

<script type="text/javascript">

    showResults();

    function showResults() {
        var p = document.getElementById('process');
        p.innerHTML = "";
        var g = document.getElementById('LoadingGIF');
        g.style.display = "block";


        for (var x=1;x<6;x++) {
            sleep(1000);  //sleep fo 1 second
            p.innerHTML = p.innerHTML + getDateTime() + "<br>";
        }
        g.style.display = "none";
    }

    // Delay for a number of milliseconds
    // This will be a big javascript text search of approximately 6,500 text strings of 100+ characters.
    // It performs well on Android and
    // this GIf not really needed but iPad 3 it can take up to 30 secs.
    // 

    function sleep(delay) {
        var start = new Date().getTime();
        while (new Date().getTime() < start + delay);
    }


    function getDateTime() {

    var date = new Date();

    var hour = date.getHours();
    hour = (hour < 10 ? "0" : "") + hour;

    var min  = date.getMinutes();
    min = (min < 10 ? "0" : "") + min;

    var sec  = date.getSeconds();
    sec = (sec < 10 ? "0" : "") + sec;

    var year = date.getFullYear();

    var month = date.getMonth() + 1;
    month = (month < 10 ? "0" : "") + month;

    var day  = date.getDate();
    day = (day < 10 ? "0" : "") + day;

    return year + "/" + month + "/" + day + "&#160;&#160;" + hour + ":" + min + ":" + sec;

}
</script>


#加载GIF{z-索引：100；
位置：绝对位置；
顶部：50%；左侧：50%；
上页边距：-100px；左页边距：-100px；
显示：无；}
塔斯莱普
睡眠和搜索消息测试
搜索您的匹配项
showResults（）；
函数showResults（）{
var p=document.getElementById（'process'）；
p、 innerHTML=“”；
var g=document.getElementById（'LoadingGIF'）；
g、 style.display=“block”；
对于（var x=1；x来说，当你像这样睡觉时，这有很多缺点
它会耗尽所有资源，并阻塞javascript“线程”，还将很快导致内存不足问题
让javascript真正等待，而不是使用一段时间：
var lastCall = -1;
var timeToSleep;
var callback;
function sleep(delay, cb) {
    if (lastCall == -1) {
        lastCall = Date.now();
        timeToSleep = delay;
        callback = cb;
    }
    if (Date.now() - lastCall < timeToSleep) {
        requestAnimationFrame(sleep);
    } else {
        lastCall = -1;
        callback();
    }
}

JavaScript是单线程的。在这个简单的测试中，您正在使用该线程，因此在整个showResults（）方法未完成之前，您不会看到该GIF
对于实际的代码（您将在其中进行AJAX调用），您的上述逻辑应该可以工作。此外，在这样的场景中，使用“position:fixed”更合适，因为即使您使用scroll，也会在固定位置显示进度gif
更新：
您可以将数据（JSON）放在单独的JS文件中，然后使用$.getJSON（）函数加载该文件。在调用此函数之前显示gif，然后将其隐藏在success函数中。您是否考虑过修复整个“大约需要30秒”的问题情况？这是一个简单的字符串javascript数组，我对每个数组条目匹配一两个单词。因为它在Android（Galaxy S4和更新的Galaxy）上运行得非常好，我不知道有什么方法可以让它更简单。HTML文件总共是2mb。谢谢-我会在回家的时候实现这一点-目前正在旅行。感谢固定提示。为了保持简单，因为它是离线的，我避免了库。数据作为javascript数组包含在HTML文件中。如果数据是您的html页面，这意味着数据+html一起在客户端下载。然后进行处理。这样，您可以使用setTimeout函数进行处理，但这不是处理它的好方法。问题在于下载，而不是处理（我假设）。
sleep(6000, function() {
    // 6 seconds later
});