Javascript：ちょうど表示する読み込みGIF

私はjavascriptにあまり熟練していませんが、私は非常に単純なことをやっていると思っていました。Javascript：ちょうど表示する読み込みGIF

私はHTMLファイルを持っています。これは、ブラウザでのみ実行できます.WiFiや携帯電話にアクセスできないためです。私は必要なリソースを最小限に抑えるためにのみjavascriptを使用しています。

約6500レコードを検索して一致を返します。これはアンドロイド（1〜2秒）でうまくいきますが、iPad3（私がテストしなければならないIOSのみ）は約30秒かかっているので、「DIVを検索しています」を追加して実行中であることを示します。

私は、これを試してみるための簡単なテストであると思ったものを作成しました。私の検索メッセージには、スリープループと表示/非表示の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>

出典

2017-02-21 mcl

「約30秒かかる」状況を修正することを考えましたか？ –

これは文字列の単純なjavascript配列であり、各配列エントリに対して1つまたは2つの単語に一致します。 Android（Galaxy S4以降のGalaxy）ではうまく動作するため、簡単にする方法はありません。合計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呼び出しを行う）では、上記のロジックが有効です。スクロールで遊んでいても、一定の位置に進行状況を表示し続けるようなシナリオでは、 "position：fixed"の方が適しています。

更新日：データ（JSON）を別のJSファイルに配置し、$ .getJSON（）関数を使用してそのファイルを読み込むことができます。この関数を呼び出す前にGIFを表示し、成功関数で非表示にします。

出典

2017-02-21 11:08:21 BilalS

固定チップをありがとう。シンプルにするため、すべてオフラインなので、私はライブラリを避けました。データは、JavaScriptファイル内にjavascript配列として格納されています。 – mcl

データがHTMLページの一部である場合、データ+ htmlがクライアント側で一緒にダウンロードされることを意味します。そして処理が行われます。このようにして、setTimeout関数を使って処理ジャンクを行うことができますが、それはそれを処理する良い方法ではありません。問題はダウンロードであり、処理ではありません（私は仮定します）。 – BilalS

Javascript：ちょうど表示する読み込みGIF

答えて

関連する問題