2016ife任务十九：基础JavaScript练习（二）

实现上图功能

js模块化，数组的操作，冒泡排序，随机数的应用，

同步，异步，闭包

主要实现排序数字没替换一次就要渲染一次

涉及到同步，异步，闭包

排序没问题，主要每次排序都要渲染一遍，而排序是同步的，很快就排好了，渲染直接是排序好的结果

1.在内循环中用setTimeout，用闭包存datalist的值，可是发现每个datalist的值都是一样的，后来发现datalist是指针不是值，即使都用闭包给每个datalist存了，但是每个datalist都指向一处地方，而那处已经是排序完的

2.所以每次存datalist都要存它的值，Object.assign([],datalist);拷贝一份，然后存

3.但是发现用setTimeout不能控制每次渲染的间隔，所以把每次值都存在数组中，循环用setInterval掉用渲染

 //排序算法
 function bubbleSort(datalist,delay){
     var delay = delay || 10;
     if(datalist == null || datalist.length<=1){
        return false;
     }
    for(var i = 0;i<datalist.length-1;i++){   //冒泡排序
        for(var j = 0;j<datalist.length-1-i;j++){
            if(datalist[j]>datalist[j+1]){
                var a = datalist[j];
                datalist[j] = datalist[j+1];
                datalist[j+1]=a;
                var arr = Object.assign([],datalist);  //拷贝数组的值
                bubblelist.push(arr)  // 存入全局的数组
                // setTimeout(function(arr){
                //     return function(){
                //         render(arr)
                //     }
                // }(arr),1000) 
            }
        }
    }
    i=0
    var timer = setInterval(function(){      //  每个一段时间渲染一次
        if(bubblelist == null || i>bubblelist.length-1){  //清除定时器
            clearInterval(timer);
            bubblelist.length=0;
            return false;
        }
        render(bubblelist[i])
        i++;
    },delay)
}