プログレスバーはどんなWebブラウザでも動作しません。

Question

私の開発の進行状況バーにいくつか問題があります。

私はPHPプロセスを呼び出すAjax呼び出しを同時に起動するJavaScript関数を持っています。これらのAjaxコールは、より大きなプロセスの割合を表します。たとえば、100回のAjaxコールを開始すると、それぞれがプロセスの1％を表します。

問題は、Ajax呼び出しが終了したときにJavaScript経由でHTTP DOMを強制的に再描画できないという問題です。

<link rel="stylesheet" href="(...)/javascript/themes/base/ui.core.css"> 
<link rel="stylesheet" href="(...)/javascript/themes/base/ui.theme.css"> 
<script src="(...)/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script> 

そして、重要なコードは、次のいずれかです：

ので、輸入はこれらです（打ち上げAjax呼び出しの前に）

プログレスバーの作成：

$("#progressbar").progressbar({max:100, value:0}); 
$("#progressbar").progressbar("enable"); 

すべてのAjax呼び出しが終了すると、変数が変更されます。私が起動すると、すべてのAjaxは、私はその変数を見て、割合を取得するJavaScriptのsetTimeout、とオブザーバー関数を作成し呼び出す：

$（「＃プログレスバーが」）だけのdiv HTMLタグであることを

setTimeout (function(){ 
    (...) 
    var percentage = Math.round(((proccessedLines)/totalLines)*100); 
    $("#progressbar").progressbar("value", percentage); 
    (...) 
}, 500); 

そして、最後に、その名前で

したがって、問題はタイムアウトです。そのプログレスバーの値を更新してDOMを更新するはずですが、再描画する必要がありますが、それはうまくいくわけではありません。

アイデア？

もう1つ指摘しておきます。このプロセスは2日前まで完全に動作していました。ブラウザのいくつかの新しい変更が可能でしょうか？

Answer 1

setTimeout関数は、500ms後に1回だけ実行されます。たぶん、あなたの関数500msごとに実行するか、このスニペットを検討するのsetInterval関数を使用します：https://jsfiddle.net/nicolastorre/o35teyq3/32/

// Parameters 
var queryList = new Array('code', 'js', 'php'); 
var lenQueryList = queryList.length; 
var percentage = 0; 
var proceed = 0; 
var totalPercentage = 100; 

// Init progress bar 
$("#progressbar").progressbar({max:totalPercentage, value:percentage}); 
$("#progressbar").progressbar("enable"); 

for(var i = 0; i < lenQueryList; i++) { 
    /*### setTimeout to make a pause (just for the demo) ###*/ 
    setTimeout(function() { 
    console.log('just a pause to see slowly!'); 
     console.log(queryList[i]); 

     // Wikipedia api search 
    $.ajax({ 
     url: 'https://en.wikipedia.org/w/api.php?callback=?', 
     data: { 
      srsearch: queryList[i], 
      action: "query", 
      list: "search", 
      format: "json" 
     }, 
     error: function() { 
      console.log('An error occured'); 
     }, 
     dataType: 'json', 
     success: function(data) { 
      // Get results 
      console.log(data); 

      // Update progress bar 
      proceed++; 
      percentage = Math.round((proceed/lenQueryList)*totalPercentage); 
      $("#progressbar").progressbar("value", percentage); 
     }, 
     type: 'POST' 
    }); 


    }, 500 * i); // setTimeout to make a pause (just for the demo) 
    /*########################################*/ 
}