美文网首页
js中setTimeout方法写在for循环中不起作用的解决方法

js中setTimeout方法写在for循环中不起作用的解决方法

作者: 90后的晨仔 | 来源:发表于2017-09-03 00:11 被阅读58次

    在开发中我们可能会遇到这样一个需求,例子如下:

    for(var i = 0; i< 4;i++){
        setTimeout(function () {
            console.log("setTimeout方法在for循环中不起作用");
        },3000);
    }
    

         如上所述,当我们需要在for循环中写一个setTimeout方法来让i循环存在一定得间隔的时候[假如i=1我们希望它间隔3秒然后再去执行i = 2]可是你会惊奇的发现它竟然不起作用????

        解决方法如下:

        方法一:使用递归的方法
    
        var k = 0;
        function  testAl()
        {
    
    
            if (k < 4){
                test(k);
                k++;
            }
    
            if( k < 4) setTimeout(function(){
                testAl();
            },2000);
        }
        testAl();
    
    function  test(k) {
        console.log("来过了=>"+ k);
    }
    
    
        方法二:使用setInterval方法
    countDown();//调用下边的方法
    
    var _interval;
    var counterTimes = 0;
    function  countDown() {
             _interval = setInterval(scoreCounter, 3000);
             function scoreCounter() {
                 counterTimes++;
                 if (counterTimes < 4) {
                     console.log("_flashTimes=>" + counterTimes);
                 }else {
                     counterTimes = 0;
                     clearInterval(_interval);
                 }
             }
    
    }
    
    

    相关文章

      网友评论

          本文标题:js中setTimeout方法写在for循环中不起作用的解决方法

          本文链接:https://www.haomeiwen.com/subject/uqldjxtx.html