javascript异步编程系列【七】----扫盲，我们为什么要用Jscex

最新推荐文章于 2024-11-12 11:19:19 发布

weixin_34121282

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量84

点赞数

文章标签： javascript 前端 ui ViewUI

有人问我，不用Jscex是怎么把算法拆烂拆散的？为什么要用Jscex？

为什么不用？那么就从高中演讲冒泡培训说起吧···

【冒泡排序】

基本思想（以升序举例）：

§形象比喻：像水面冒泡一样每次从水底浮到水面.

§具体而言：比较相邻的两个数据元素，反序则交换。经过一趟排序后，最小值元素移到最上位置，其他较小的元素也向最上端位置移动(一趟起泡) 。

§代码实现：对于有n个数据元素的数据序列，共需n-1趟排序，第i趟对从位置n-1到位置i的数据元素进行比较、交换(最小下标从0开始)，因此用二重循环实现

【过程举例】

【代码实现】

var array = new Array(44, 20, 17, 26, 15, 7, 17, 58);
for (var j = 0; j < array.length - 1; j++) {
for (var i = array.length - 1; i > 0; i--) {
if (array[i] < array[i - 1]) {
var temp = array[i];
array[i] = array[i - 1];
array[i - 1] = temp;
}
}
document.write("第" + (j+1) + "趟排序后：")
for (var p = 0; p < array.length; p++) {
document.write(array[p] + " ");
}
document.write("<br/>")
}

【输出结果】

如果这样看不到冒泡的过程话，我们可以把每一次对比和交换后的结果输出：

var array = new Array(44, 20, 17, 26, 15, 7, 17, 58);
var count = 0;
for (var j = 0; j < array.length - 1; j++) {
for (var i = array.length - 1; i > 0; i--) {
if (array[i] < array[i - 1]) {
var temp = array[i];
array[i] = array[i - 1];
array[i - 1] = temp;
}
count++
document.write("第" + count+ "次对比交换后")
for (var p = 0; p < array.length; p++) {
document.write(array[p] + " ");
}
document.write("<br/>")
}
}

学生说：我还是看不到冒泡的过程啊·····························

然后我想了想，大概写出了下面这段代码，然后卡住了······

function showArray(sortingArray) {
var html = "";
for (var q = 0; q < sortingArray.length; q++) {
html += sortingArray[q] + " ";
}
document.getElementById("show").innerHTML = html;
//怎么办呢？我要把这个算法拆开显示?！?！?！?无助啊?！?！?
for (var j = 0; j < array.length - 1; j++) {
for (var i = array.length - 1; i > j; i--) {
if (array[i] < array[i - 1]) {
temp = array[i];
array[i] = array[i - 1];
array[i - 1] = temp;
}
}
}
setTimeout("showArray(sortingArray)", 50);
}

然后我灵光一现，直接用Jscex

9 8 1 2 3 5 4 6 7

 <script>
var array = new Array(567, 101, 44, 20, 99, 17, 26, 15, 7, 17, 58, 87, 4, 16);
var temp;
var sortAsync = eval(Jscex.compile("async", function (array) {
for (var j = 0; j < array.length - 1; j++) {
for (var i = array.length - 1; i > j; i--) {
if (array[i] < array[i - 1]) {
temp = array[i];
array[i] = array[i - 1];
array[i - 1] = temp;
}
showArray(array);
$await(Jscex.Async.sleep(50));
}
}
}));
function showArray(sortingArray) {
var html = "";
for (var q = 0; q < sortingArray.length; q++) {
html += sortingArray[q] + " ";
}
document.getElementById("show").innerHTML = html;
}
function Button1_onclick() {
sortAsync(array).start();
}
</script>
<div style="font-size:xx-large" id="show">567 101 44 20 99 17 26 15 7 17 58 87 4 16 </div>
<input id="Button1" type="button" value="开a始?冒°泡Y排?序ò" onclick="return Button1_onclick()" />

那么传统的异步编程遇到了什么困难？

比如那段未写完的代码：

function showArray(sortingArray) {
var html = "";
for (var q = 0; q < sortingArray.length; q++) {
html += sortingArray[q] + " ";
}
document.getElementById("show").innerHTML = html;
 for (var j = 0; j < array.length - 1; j++) {
for (var i = array.length - 1; i > j; i--) {
if (array[i] < array[i - 1]) {
temp = array[i];
array[i] = array[i - 1];
array[i - 1] = temp;
}
}
}
setTimeout("showArray(sortingArray)", 50);
}