For循環(huán)線程與JQ動(dòng)畫結(jié)合的問題
前言：
最近做了一組數(shù)字翻滾動(dòng)畫橄登，期間采用jq的animate動(dòng)畫和for循環(huán)肥照，對拼接成數(shù)組的數(shù)字進(jìn)行展示嚷闭，踩了不少坑，在此做個(gè)記錄论寨，將心得整理一下星立。
序：貼代碼如下(寫個(gè)序，其實(shí)就是為了貼代碼葬凳，哈哈绰垂，我太邪惡了)：
Html:

<div class="cont">
            <div class="box">

            </div>
            <button type="button" onclick="$.fn.move()">點(diǎn)擊翻滾</button>
        </div>

Js:

// animate
    $.fn.move = function(){
        var arr = numAdd();
        console.log(arr)
        for(var i=0;i<$('.num').not('.comma').length+1;i++){
            
            for(var j=0;j<10;j++){
                if(arr[i] == $(".num>div>div").eq(j).text()){
                    var value = -68*j + 'px';
                    var hei = $(".num>div").eq(i).css("top");
                    var newTop = -68*j,oldTop = parseFloat(hei.split("px")[0]);
                    if(newTop < oldTop){
                        $(".num>div").eq(i).animate({top:value},800);
                    }else if(newTop > oldTop){
                        var topNew = -68*(j+10)+'px';
                        $(".num>div").eq(i).append($(domNum).addClass('temp'));
                        console.log('newTop['+j+']=='+ newTop + '---oldTop[' + i + ']--'+ oldTop + '---value=='+value)
                        $(".num>div").eq(i).animate({top:topNew},500)
                            console.log(value)
                            $(".num>div").eq(i).animate({top:value},10);
                            setTimeout(function(){
                                $(".num>div>.temp").remove();
                            },800)
                    }else{
                        $(".num>div").eq(i).animate({top:value},800);
                    }
                }
            }
        }
    }

Css這塊就不貼了，期間對于數(shù)字的翻滾用到了絕對定位火焰。

坑的解析：
1劲装、move函數(shù)中for循環(huán)的雙層嵌套，執(zhí)行過程的時(shí)間是短暫的昌简，而且每一次執(zhí)行當(dāng)中啟動(dòng)的animate都帶有延時(shí)加載的特性占业，可視為單個(gè)線程的運(yùn)行互不影響，
2纯赎、Animate的運(yùn)行谦疾，在延時(shí)結(jié)束的時(shí)間，我們需要去進(jìn)行多余dom的清除和第一組數(shù)據(jù)對應(yīng)值的歸位（稱為回歸犬金，比如說原來的數(shù)字某一位是6念恍，要變更為3六剥；我們需要從6開始上滾到展示9，在從0開始滾到到展示3樊诺；之后便是回歸的開始仗考，將dom的css定位到第組0-9中的3的位置展示，并刪除第二組0-9的dom）词爬，而回歸的開始時(shí)間秃嗜，for循環(huán)已經(jīng)執(zhí)行結(jié)束，拋出最大的i值顿膨；

(the importent最重要的問題 ,循環(huán)內(nèi)animate執(zhí)行結(jié)束之前锅锨，for循環(huán)已經(jīng)執(zhí)行結(jié)束）

3、因此恋沃，此時(shí)回歸的value值必搞，取的i就是最大的i，對應(yīng)每一個(gè).num內(nèi)歸位的情況就是囊咏，全部都變成了最大的value值恕洲；

解決辦法：
在循環(huán)中animate執(zhí)行的下一步，添加一次性定時(shí)器（相當(dāng)于另起一個(gè)線程梅割，讓沒一次for循環(huán)中都啟動(dòng)兩個(gè)互不影響的線程霜第，在延遲時(shí)間之后再執(zhí)行另一個(gè)線程），這個(gè)線程定時(shí)在animate執(zhí)行完畢之后再開始執(zhí)行户辞，此時(shí)不影響animate的變化效果泌类，并完美解決了for循環(huán)的執(zhí)行與animate延時(shí)線程之間無法歸位和滾動(dòng)錯(cuò)亂的問題。

寫法如下：
$(namet).eq(i).animate({top:topNew},800)
            $(namet).eq(i).animate({top:value},10);
    setTimeout(function(){
        $(".num>div>.temp").remove();
},900)