2011-11-03 30 views
1

我發現這個偉大的職位上創造的javascript進度條: Show javascript execution progressjQuery的每個循環:如何整合到進度條的JavaScript代碼

它爲我的偉大工程,除了代碼的一節我不能整合。

假設這種方法:

var process = { 
steps: [ 
       function(){ 
       //processing 
      }, 
      function(){ 
       //processing 
      }, 
      function(){ 
       element.each(function(index){ 
        //processing 
       }); 
      }, 
      function(){ 
       //processing 
      }, 
      function(){ 
       //processing 
      } 
], 
index: 0, 
nextStep: function(){ 
    this.steps[this.index++](); 
    if (this.index != this.steps.length) { 
     var me = this; 
     window.setTimeout(function(){ 
      me.nextStep(); 
     }, 0); 
    } 
} 

};

process.nextStep();

This works great。不過,我認爲是這樣的一個過程:

element.each(function(index){ 
    //do some processing 
}); 

的一種方式進行整合,這將是剛剛在這樣的功能,把它:

function(){ 
    element.each(function(index){ 
      //do some processing 
    }); 
}, 

然而,處理的約70%在這個循環中完成。因此,如果它從10%跳躍到80%,那麼它就會挫敗進度條的作用。我想要做的是把這個每個循環的每個迭代作爲步驟部分中的一個匿名函數來處理。因此,最終目標是除了將每個已定義的函數作爲一個步驟進行計數外,我的每個循環的每次迭代都將被計爲一步如何執行此操作的任何想法?我試圖把.each循環放在那裏,但沒有成功。

感謝您的幫助。

回答

2

這是一個黑客,但你可以使用each()循環來填充你的處理步驟的隊列,然後執行該隊列。在這種情況下,我使用空的jQuery對象作爲隊列。 setTimeout需要明顯改變DOM。

例如:

var myQueue = $({});  

element.each(function(index){ 
    myQueue.queue('stack', function() { 
     //do some processing 
     setTimeout(function() { myQueue.dequeue('stack'); }, 10); 
    } 
}); 

上述工程的jQuery 1.3,如果使用V1.4 +:

var myQueue = $({});  

element.each(function(index){ 
    myQueue.queue('stack', function(next) { 
     //do some processing 
     setTimeout(function() { next(); }, 10); 
    } 
}); 

一旦隊列建成,並從每個循環填充,你就可以開始隊列中有:

myQueue.dequeue('stack'); 

又見What are queues in jQuery?

0

用於進度欄的方法與每個步驟的a都不兼容。此方法無法爲每個步驟的每個分數更新進度欄。您最好使用其他方法更新進度欄。