js中如何解决 函数终止

Question

<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;
    
}

想要实现的就是input触发change后就开始进行动画(代码所示，每次触发都是不同元素的进行动画)

可后来发现个问题，第一次触发事件后开始动画效果，如果这个时候紧接着触发第二次事件，那么上一次触发事件的的动画就会立即停止，只有后面触发的才会正常进行，这是怎么回事，如上代码重整的话应该怎么写呢？

Answer 1

我觉得不要用计时器来做这个事情，你想的大概就是做一个模拟多线程上传文件的进度条？如果硬要用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>

思路是用数组来存储各个线程的进度。

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

Answer 2

后面那个number+1应该改为number+=1吧兄弟， 间隔调用最后执行，函数先加1 然后计时器里面的number才会随着你外面的值改变，这是我发现的一个问题。希望对你有用。