鍍金池/ 問答/HTML5  HTML/ js中如何解決 函數(shù)終止

js中如何解決 函數(shù)終止

<input type="file" onchange="do_css();">



var number = 1;



function do_css(){

var i= 1;

     setInterval(function(){
     
        $(".div_"+number).css({'width':i+'%'})
     i = i+1;
     
     },1000)
      
    
    
    number+1;
    
}

想要實現(xiàn)的就是input觸發(fā)change后就開始進行動畫(代碼所示，每次觸發(fā)都是不同元素的進行動畫)

可后來發(fā)現(xiàn)個問題，第一次觸發(fā)事件后開始動畫效果，如果這個時候緊接著觸發(fā)第二次事件，那么上一次觸發(fā)事件的的動畫就會立即停止，只有后面觸發(fā)的才會正常進行，這是怎么回事，如上代碼重整的話應該怎么寫呢？

回答
編輯回答
孤客

后面那個number+1應該改為number+=1吧兄弟， 間隔調用最后執(zhí)行，函數(shù)先加1 然后計時器里面的number才會隨著你外面的值改變，這是我發(fā)現(xiàn)的一個問題。希望對你有用。

2017年6月4日 04:05
編輯回答
落殤

我覺得不要用計時器來做這個事情，你想的大概就是做一個模擬多線程上傳文件的進度條？如果硬要用setInterval來做，那我覺得覺得可以這樣做，真的，難倒我了，想了一段時間。

    var number = 1;
    var tmp;
    var loader=[];
    function do_css() {
        clearInterval(tmp);
        var i = 1;
        loader.push(i);
        $(".outdiv").append('<div class="box"></div>');
        tmp = setInterval(function () {
            for (let j = 0; j < $(".box").length; j++) {
                $($(".outdiv .box")[j]).css({
                    'width': loader[j] + '%'
                })
                loader[j]++;
            }
            

        }, 1000)
        number += 1;
    }
<input type="file" onchange="do_css();">

    <div class="outdiv">

    </div>

思路是用數(shù)組來存儲各個線程的進度。

https://codepen.io/alexxxcs1/...

2017年7月8日 22:46