Javascript：只是不能得到一個加載GIF來顯示

我不是很熟練的JavaScript，但我認爲我做了一件很簡單的事情。Javascript：只是不能得到一個加載GIF來顯示

我有一個HTML文件，它可以在瀏覽器中運行，因爲在使用中將無法訪問WiFi或手機。我只使用JavaScript來最小化所需資源。

它搜索約6500條記錄並返回匹配項。這工作正常在android（1到2秒），但iPad3（只有IOS我要測試），大約需要30秒，所以我想添加一個「搜索DIV」，以顯示它正在運行。

我創建了我認爲是一個簡單的測試來嘗試這個 - 睡眠循環和顯示/隱藏div我的搜索消息。

搜索DIV從未見過，我不明白，爲什麼在一秒鐘間隔內不顯示進度消息，而是在睡眠循環完成時一次性顯示。

我明顯誤解了一些內部過程。

<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>

來源

2017-02-21 mcl

你有沒有想過修整整個「大約需要30秒」的情況？ –

這是一個簡單的字符串javascript數組，我對每個數組項匹配一個或兩個單詞。由於它在Android（Galaxy S4和更新的Galaxies）上運行良好，我不知道任何方法，使其更簡單。該HTML文件總共2MB。 – mcl

當你這樣做睡覺時，有很多缺點。

它吃掉了所有的資源，它阻止了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(); 
    } 
}

然後調用它像這樣：

sleep(6000, function() { 
    // 6 seconds later 
});

來源

2017-02-21 11:01:15

謝謝 - 當我回到家時我會執行此操作 - 此刻正在旅行。 – mcl

JavaScript是單線程的。在這個簡單的測試中，您正在使用該線程，因此直到整個showResults（）方法未完成時纔會看到該GIF。

隨着實際的代碼（你會在其中進行AJAX調用），你的上面的邏輯應該工作。在這種情況下，即使您將使用滾動進行播放，「持倉：固定」也更適合在固定位置顯示進度gif。

更新：您可以將您的數據（JSON）放在單獨的JS文件中，然後使用$ .getJSON（）函數加載該文件。在調用此函數之前顯示您的gif，然後將其隱藏在成功函數中。

來源

2017-02-21 11:08:21 BilalS

感謝您的固定提示。爲了簡單起見，因爲它都是離線的，我避免了圖書館。數據作爲一個javascript數組包含在HTML文件中。 – mcl

如果數據是你的html頁面的一部分，這意味着data + html一起下載到客戶端。然後處理髮生。通過這種方式，你可以使用setTimeout函數來處理垃圾，但這不是處理垃圾的好方法。問題與下載，而不是處理（我假設）。 – BilalS

Javascript：只是不能得到一個加載GIF來顯示

回答

相關問題