Jscex + jQuery UI

If you have played a table tennis game, you will not be unfamiliar with the concept of strength bar, such:

There are also vertical intensity bars, such:

In fact, similar articles are everywhere! For example, the progress bar when you enter the game, the bar read during the mage's trial in World of Warcraft, and so on ······

By introducing jquery ui, we can easily get the following static strength:

Html:

 
 

  
  
<div class="progressbar" style=" width: 20%"> 
  
  
/div> 
 
 

Js:

 
 

  
  
$(function () {  
  
  
$(".progressbar").progressbar({  
  
  
value: 37  
  
  
});  
  
  
}); 
 
 

The effect is as follows:

Add Jscex to make it work:

 
 

  
  
<Script type = "text/javascript">
  
  
$ (Function (){
  
  
$ (". Progressbar"). progressbar ({
  
  
Value: 5
  
  
});
  
  
});
  
  
Var executeAsync = eval (Jscex. compile ("async", function (proceedValues ){
  
  
While (proceedValues <100 ){
  
  
ProceedValues ++;
  
  
$ Await (Jscex. Async. sleep (50 ));
  
  
$ (". Progressbar"). progressbar ({
  
  
Value: proceedValues
  
  
});
  
  
}
  
  
}));
  
  
Function btnExecuteAsync_onclick (){
  
  
ExecuteAsync (5). start ();
  
  
}
  
  
</Script>
  
  
<Div class = "progressbar" style = "width: 20%">
  
  
</Div>
  
  
<Input id = "btnExecuteAsync" type = "button" value = "start" onclick = "return btnExecuteAsync_onclick ()"/>
 
 

The effect is as follows:

 

But in general, we need to round-trip infinite loops, so we should achieve this:

 
 

  
  
var executeAsync = eval(Jscex.compile("async", function (proceedValues) {  
  
  
while (true) {  
  
  
while (proceedValues < 100) {  
  
  
proceedValues++;  
  
  
$await(Jscex.Async.sleep(10));  
  
  
$(".progressbar").progressbar({  
  
  
value: proceedValues  
  
  
});  
  
  
}  
  
  
if (proceedValues == 100) {  
  
  
while (proceedValues > 0) {  
  
  
proceedValues--;  
  
  
$await(Jscex.Async.sleep(10));  
  
  
$(".progressbar").progressbar({  
  
  
value: proceedValues  
  
  
});  
  
  
}  
  
  
}  
  
  
}  
  
  
})); 
 
 

The effect is as follows:

 

At this time, I accidentally commented out if (proceedValues = 100) {} and the code looked like this:

 
 

  
  
var executeAsync2 = eval(Jscex.compile("async", function (proceedValues) {  
  
  
while (true) {  
  
  
while (proceedValues < 100) {  
  
  
proceedValues++;  
  
  
$await(Jscex.Async.sleep(10));  
  
  
$(".progressbar3").progressbar({  
  
  
value: proceedValues  
  
  
});  
  
  
}  
  
  
//if (proceedValues == 100) {  
  
  
while (proceedValues > 0) {  
  
  
proceedValues--;  
  
  
$await(Jscex.Async.sleep(10));  
  
  
$(".progressbar3").progressbar({  
  
  
value: proceedValues  
  
  
});  
  
  
}  
  
  
//}  
  
  
}  
  
  
})); 
 
 

I ran it and waited for him to report an ERROR. The result was a miracle. The effect was as follows. It was the same as the above. No ERROR was reported!

It can be seen that the two internal while statements are not executed at the same time, but are very linear. They wait for each other, and the initial execution order is from top to bottom. The internal while statements are executed completely, then jump to the outermost while and re-execute.

This design method is undoubtedly elegant !!

The above three while methods have good semantics. From the analysis, the code can also be written as follows:

 
 

  
  
var executeAsync = eval(Jscex.compile("async", function (proceedValues) {  
  
  
while (proceedValues < 100) {  
  
  
proceedValues++;  
  
  
$await(Jscex.Async.sleep(10));  
  
  
$(".progressbar").progressbar({  
  
  
value: proceedValues  
  
  
});  
  
  
if (proceedValues == 100) {  
  
  
while (proceedValues > 0) {  
  
  
proceedValues--;  
  
  
$await(Jscex.Async.sleep(10));  
  
  
$(".progressbar").progressbar({  
  
  
value: proceedValues  
  
  
});  
  
  
}  
  
  
}  
  
  
}  
  
  
})); 
 
 

This is equivalent to Never jumping out of the outermost proceedValues <100, so it will go through an infinite loop.

For the latest Jscex library, please upload ····

More javascript asynchronous programming Series]