在每个循环之间使用延迟运行jquery

下面我使用

$。每个

循环通过

秒

数组

我试图将每个循环延迟1秒。但是我使用的方法有奇怪的结果

//删除类regex
$.fn.removeClassRegEx=函数（regex）{
var classes=$（this.attr（'class'）；
如果（！classes | |！regex）返回false；
var classArray=[]；
classes=classes.split（“”）；
for（var i=0，len=classes.length；iDIV，.s-2>DIV'）.removeClassRegEx（'n-'）；
$（'.s-1>DIV'）.addClass（'n-'+num[0]）；
$（'.s-2>DIV'）.addClass（'n-'+num[1]）；
}, 1000);
});
时钟{
填充：40px；
利润率：40px自动；
宽度：计算（40px*8）；
字体系列：SFMono常规、Menlo、摩纳哥、Consoleas、“解放Mono”、“信使新”、monospace；
字体大小：.8rem；
颜色：#e83e8c；
}
.时钟，h-1，
.时钟，h-2，
.时钟，m-1，
.时钟，m-2，
.时钟，s-1，
.时钟，s-2{
边缘底部：0px；
宽度：50%；
浮动：左；
位置：相对位置；
}
.时钟h-1:之前，
.时钟h-2:之前，
m-1:之前，
m-2:之前，
钟s-1：在，
钟。s-2：在{
内容：“；
填充顶部：150%；
显示：块；
}
.clock.h-1>DIV，
.clock.h-2>分区，
.clock.m-1>分区，
.clock.m-2>分区，
.clock.s-1>分区，
.clock.s-2>分区{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.时钟时间{
/*钟*/
浮动：左；
宽度：计算（40px）；
高度：计算（40px）；
显示：块；
背景：#eeeeee；
边界半径：50%；
位置：相对位置；
/*双手*/
}
.时钟时间跨度{
位置：绝对位置；
}
.时钟时间：之前，
.时钟时间：之后{
边界半径：1%；
内容：“；
显示：块；
宽度：2倍；
身高：50%；
背景#4242；
左：50%；
位置：绝对位置；
转换：translateX（-1px）；
变换原点：中心-底部；
过渡：所有1；
}
t-01:在{变换：旋转（180度）}之前n-0.t-01:在{变换：旋转（90度）}之后n-0.t-02:在{变换：旋转（270度）}之前n-0.t-02:在{变换：旋转（90度）}之后n-0.t-03:在{变换：旋转（270度）}之前n-0.t-03:在{变换：旋转（90度）}之后n-0.t-04:在{变换：旋转（270度）}之前n-04t-05:before{transform:rotate（360度）}.n-0.t-06:before{transform:rotate（180度）}.n-0.t-06:before{transform:rotate（90度）}.n-0.t-07:before{transform:rotate（270度）}.n-0.t-07:before{transform:rotate（180度）}.n-0.t-08:before{transform:rotate（360度）}.n-0.t-08:before{transform:rotate（180度）}t-10:before{transform:rotate（360度）}.n-0.t-09:before{transform:rotate（180度）}.n-0.t-10:before{transform:rotate（180度）}.n-0.t-11:before{transform:rotate（360度）}.n-0.t-11:before{transform:rotate（180度）}.n-0.t-12:before{transform:rotate（360度）}.n-0.t-12:before{transform:rotate（180度）}t-14:before{transform:rotate（180deg）}n-0.t-14:before{transform:rotate（360deg）}.n-0.t-14:before{transform:rotate（180deg）}.n-0.t-15:before{transform:rotate（360deg）}.n-0.t-15:before{transform:rotate（180deg）}.n-0.t-16:before{transform:rotate（180deg）}.n-17:rotate（360deg）}t-18:before{transform:rotate（90度）}.n-0.t-18:before{transform:rotate（90度）}.n-0.t-18:before{transform:rotate（0度）}.n-0.t-19:before{transform:rotate（270度）}.n-0.t-19:before{transform:rotate（0度）}.n-0.t-20:before{transform:rotate（360度）}t-22:before{transform:rotate（90度）}.n-0.t-23:before{transform:rotate（0）}.n-0.t-23:before{transform:rotate（270度）}.n-0.t-23:before{transform:rotate（90度）}.n-0.t-24:before{transform:rotate（270度）}.n-0.t-24:before{transform:rotate（0）}.n-1.t-01:before{transform:rotate（180度）}t-02:在{变换：旋转（270度）}之前n-1.t-02:在{变换：旋转（90度）}之后n-1.t-03:在{变换：旋转（270度）}之前n-1.t-03:在{变换：旋转（180度）}之后n-1.t-04:在{变换：旋转（225度）}之前n-1.t-05:在{变换：旋转（360度）}之前n-1.t-05:在{t-07:before{transform:rotate（360度）}.n-1.t-07:before{transform:rotate（270度）}.n-1.t-07:before{transform:rotate（180度）}.n-1.t-08:before.n-1.t-08:before.n-1.t-09:before{transform:rotate（225度）}.n-1.t-10:before{transform:rotate（360度）}.n-1t-11:before{transform:rotate（360度）}n-1.t-11:before{transform:rotate（180度）}.n-1.t-12:before.n-1.t-12:before.n-1.t-13:before{transform:rotate（225度）}.n-1.t-14:before{transform:rotate（360度）}.n-1.t-14:before{transform:rotate（180度）}.n-1.t-15:before{transformt-17:before{transform:rotate（180度）}.n-1.t-17:before{transform:rotate（90度）}.n-1.t-17:before{transform:rotate（90度）}.n-1.t-18:before{transform:rotate（270度）}.n-1.t-18:before{transform:rotate（0度）}.n-1.t-19:before{transform:rotate（360度）}.n-1.t-19:before{transform:rotate（90度）}}t-21:before{transform:rotate（90度）}n-1.t-21:before{transform:rotate（90度）}.n-1.t-21:before{transform:rotate（0度）}.n-1.t-22:before{transform:rotate（270度）}.n-1.t-22:before{transform:rotate（90度）}.n-1.t-23:before{transform:rotate（270度）}.n-24
$.each(seconds, function(sec, num) {

    $('.s-1 > DIV, .s-2 > DIV').removeClassRegEx('n-');
    $('.s-1 > DIV').addClass('n-' + num[0]);
    $('.s-2 > DIV').addClass('n-' + num[1]);

   setTimeout(function() {}, 1000);

});

$.each(seconds, function(sec, num) {

  setTimeout(function() {

    $('.s-1 > DIV, .s-2 > DIV').removeClassRegEx('n-');
    $('.s-1 > DIV').addClass('n-' + num[0]);
    $('.s-2 > DIV').addClass('n-' + num[1]);

  }, (sec+1)*1000);

});

// remove class regex
$.fn.removeClassRegEx = function(regex) {
    var classes = $(this).attr('class');
    if (!classes || !regex) return false;
    var classArray = [];
    classes = classes.split(' ');
    for (var i = 0, len = classes.length; i < len; i++)
        if (!classes[i].match(regex)) classArray.push(classes[i]);
    $(this).attr('class', classArray.join(' '));
};

var seconds = [
    ['0', '1'],
    ['0', '2'],
    ['0', '3'],
    ['0', '4'],
    ['0', '5'],
    ['0', '6'],
    ['0', '7'],
    ['0', '8'],
    ['0', '9'],
    ['1', '0'],
];

var i = 0;                     

function myLoop () {           
   setTimeout(function () {    

      i++;               
       console.log(i);//  increment the counter
     $('.s-2 > DIV').removeClassRegEx('n-');

    $('.s-2 > DIV').addClass('n-' + i);
      if (i < 10) {   

         myLoop();            
      }

   }, 1000)
}

myLoop();   

getValue();
var interval = setInterval(function() {
    getValue();
}, 1000);

function getValue() {
    var date = new Date();
    val = date.getSeconds();
    val = parseInt(val) + 1;
    val = getSec(val);
    setValue(val);
}

function setValue(val) {
        $('.s-1 > DIV, .s-2 > DIV').removeClassRegEx('n-');
        $('.s-1 > DIV').addClass('n-' + parseInt(val / 10));
        $('.s-2 > DIV').addClass('n-' + parseInt(val % 10));
}

function getSec(num) {
    if (num < 10 || num == 0) {
        num = '0' + num;
    } else if (num >= 60) {
        num = num % 60;
    }
    return num;
}