Fix progress page so it effectively fetches progress data synchronously
i.e. use `setTimeout()` instead of `setInterval()` and only set next timeout after previous fetch has succeeded
This commit is contained in:
		
							parent
							
								
									fe413ba2f5
								
							
						
					
					
						commit
						c16349d5c3
					
				
					 1 changed files with 44 additions and 26 deletions
				
			
		|  | @ -16,16 +16,19 @@ | |||
|     ${self.extra_styles()} | ||||
|     <script type="text/javascript"> | ||||
| 
 | ||||
|       var updater = null; | ||||
|       var stillInProgress = true; | ||||
| 
 | ||||
|       updater = setInterval(function() {update_progress()}, 1000); | ||||
|       // fetch first progress data, one second from now | ||||
|       setTimeout(function() { | ||||
|           update_progress(); | ||||
|       }, 1000); | ||||
| 
 | ||||
|       % if can_cancel: | ||||
|       $(function() { | ||||
| 
 | ||||
|           $('#cancel button').click(function() { | ||||
|               if (confirm("Do you really wish to cancel this operation?")) { | ||||
|                   clearInterval(updater); | ||||
|                   stillInProgress = false; | ||||
|                   $(this).button('disable').button('option', 'label', "Canceling, please wait..."); | ||||
|                   $.ajax({ | ||||
|                       url: '${url('progress.cancel', key=progress.key)}?sessiontype=${progress.session.type}', | ||||
|  | @ -84,36 +87,51 @@ | |||
|       function update_progress() { | ||||
|           $.ajax({ | ||||
|               url: '${url('progress', key=progress.key)}?sessiontype=${progress.session.type}', | ||||
| 
 | ||||
|               success: function(data) { | ||||
| 
 | ||||
|                   if (data.error) { | ||||
|                       // errors stop the show, we redirect to "cancel" page | ||||
|                       location.href = '${cancel_url}'; | ||||
|                   } else if (data.complete || data.maximum) { | ||||
|                       $('#message').html(data.message); | ||||
|                       $('#total').html('('+data.maximum_display+' total)'); | ||||
|                       % if can_cancel: | ||||
|                       $('#cancel button').show(); | ||||
|                       % endif | ||||
|                       if (data.complete) { | ||||
|                           clearInterval(updater); | ||||
| 
 | ||||
|                   } else { | ||||
|                       if (data.complete || data.maximum) { | ||||
|                           $('#message').html(data.message); | ||||
|                           $('#total').html('('+data.maximum_display+' total)'); | ||||
|                           % if can_cancel: | ||||
|                           $('#cancel button').hide(); | ||||
|                           $('#cancel button').show(); | ||||
|                           % endif | ||||
|                           $('#total').html('done!'); | ||||
|                           $('#complete').css('width', '100%'); | ||||
|                           $('#remaining').hide(); | ||||
|                           $('#percentage').html('100 %'); | ||||
|                           location.href = data.success_url; | ||||
|                       } else { | ||||
|                           var width = parseInt(data.value) / parseInt(data.maximum); | ||||
|                           width = Math.round(100 * width); | ||||
|                           if (width) { | ||||
|                               $('#complete').css('width', width+'%'); | ||||
|                               $('#percentage').html(width+' %'); | ||||
|                           if (data.complete) { | ||||
|                               stillInProgress = false; | ||||
|                               % if can_cancel: | ||||
|                               $('#cancel button').hide(); | ||||
|                               % endif | ||||
|                               $('#total').html('done!'); | ||||
|                               $('#complete').css('width', '100%'); | ||||
|                               $('#remaining').hide(); | ||||
|                               $('#percentage').html('100 %'); | ||||
|                               location.href = data.success_url; | ||||
| 
 | ||||
|                           } else { | ||||
|                               $('#complete').css('width', '0.01%'); | ||||
|                               $('#percentage').html('0 %'); | ||||
|                               // got progress data, so update display | ||||
|                               var width = parseInt(data.value) / parseInt(data.maximum); | ||||
|                               width = Math.round(100 * width); | ||||
|                               if (width) { | ||||
|                                   $('#complete').css('width', width+'%'); | ||||
|                                   $('#percentage').html(width+' %'); | ||||
|                               } else { | ||||
|                                   $('#complete').css('width', '0.01%'); | ||||
|                                   $('#percentage').html('0 %'); | ||||
|                               } | ||||
|                               $('#remaining').css('width', 'auto'); | ||||
|                           } | ||||
|                           $('#remaining').css('width', 'auto'); | ||||
|                       } | ||||
| 
 | ||||
|                       if (stillInProgress) { | ||||
|                           // fetch progress data again, in one second from now | ||||
|                           setTimeout(function() { | ||||
|                               update_progress(); | ||||
|                           }, 1000); | ||||
|                       } | ||||
|                   } | ||||
|               }, | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue
	
	 Lance Edgar
						Lance Edgar