具有AJAX后台任務的交互式頁面上的JavaScript超時彈出窗口

Question

我的單頁AJAX應用程序在后台執行遞歸數據收集任務。 在頁面收集數據時，用戶可以與頁面進行交互，並且數據庫的大小可能很大。 用戶期望收集過程需要一些時間，他們對此表示滿意。

為了讓您了解后台掃描的工作方式，以下是主要的遞歸函數：

// Recursive SVN directory scan
recurseDir: function (dirName, dirNode) {
  actC.setActive(1, "recurseDir " + dirName);

  // Load svnindex.xml using ajax, cache is optional

  // The path may contain hash or CGI information. Discard it.
  var myWiLo = window.location.href.split(/[#?]/)[0];

  $.ajax({
    type: "GET",
    url: myWiLo + dirName,
    dataType: "xml",
    cache: ajaxCache,
    success: function (data) {
      $(data).each(function(){
        $(this).find('*').each(function() {
          // get XML entity name (we need 'file', and 'dir'),
          // and XML tag attribute "name" (we don't mind if it's undefined)
          var aTagName = $(this).prop("tagName");
          var anAttr = $(this).attr('name');

          // Make a new dynatree folder, recurse into directory, query the SVN server
          if (aTagName == "dir") {
            var newDirName = dirName + anAttr +"/";
            ctrl.recurseDir(newDirName,
                           dirNode.addChild( {   // ... and create new node
                             key: newDirName,
                             tooltip: newDirName, 
                             title: anAttr,
                             isFolder: true
                           })
                          );
          }
          else if ((aTagName == "file") /*&& /\.md$/.test(anAttr)*/) {
            ctrl.scanMdFile(dirName, anAttr, dirNode);

          }
        });
      });

      actC.setActive(0, "recurseDir.ajax " + dirName);
    } 
  });
},

“ ctrl.scanMdFile（）”從Markdown文件中提取信息（即，更多的AJAX工作負載）

“ actC”跟蹤活動，並在遞歸掃描完成后觸發更多處理：

  // activity counter object
  var actC = { 
    init: function () {
      this.actCnt = 0;        // pending AJAX activities during SVN scan 
      this.doneCnt = 0;       // completed AJAX activities  
      this.pBar = $("#progressbar");
    }, 
    active: function() {
      return (this.actCnt++) == this.doneCnt;
    },
    complete: function() {
      return this.actCnt == (++this.doneCnt);
    },
    progress: function() {
      return this.doneCnt/this.actCnt*100;
    },
    done: function() {
      return this.doneCnt >= this.actCnt;
    },
    setActive: function (act, who) {
       // keep track of deferred (AJAX) actions, indicate activity
      if (act == 1) { 
        if (this.active()) {
          this.pBar.progressbar({value: 0});
          ctrl.enterActive();
        }
        // console.log((this.actCnt-this.doneCnt) + " start :" + who);
      }
      else {
        if (this.complete()) {
          this.actCnt = 0;
          this.doneCnt = 0;
          ctrl.leaveActive();
          this.pBar.progressbar("destroy");
        }
       }

       if (!this.done()) {
         this.pBar.progressbar({value: this.progress()});
       }
     }
  }

“ ctrl.leaveActive（）”觸發最終處理。

根據網絡連接或服務器的性能，Windows XP或Win7上的FireFox 24（LTS）有時會彈出“腳本超時”響應。

是否有解決或更好的一些最佳實踐來處理JavaScript / AJAX應用程序中的數據？

Answer 1

一個可能的答案似乎是“使用網絡工作者”（ http://en.wikipedia.org/wiki/Web_worker ）。

根據http://caniuse.com/#search=worker的介紹，我們必須將FireFox升級到至少26版。下一個ESR（或LTS）版本將是FireFox 31，它將很快無法使用。 當前，不能選擇使用Chrome或IE11作為標准瀏覽器。

我還將研究重用上一屆會議收集的數據。