- 在每个循环之间运行带有延迟的jquery

  显示原文与译文双语对照的内容
70 0

下面我使用 $.each 来循环访问 seconds array 。

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

https://jsfiddle.net/joshmoto/mda4uf6c/

//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'],
];
$.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]);
 }, 1000);
});
.clock {
 padding: 40px;
 margin: 40px auto;
 width: calc(40px*8);
 font-family: SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono","Courier New", monospace;
 font-size:. 8rem;
 color: #e83e8c;
}
.clock. h-1,
.clock. h-2,
.clock. m-1,
.clock. m-2,
.clock. s-1,
.clock. s-2 {
 margin-bottom: 0px;
 width: 50%;
 float: left;
 position: relative;
}
.clock. h-1:before,
.clock. h-2:before,
.clock. m-1:before,
.clock. m-2:before,
.clock. s-1:before,
.clock. s-2:before {
 content:"";
 padding-top: 150%;
 display: block;
}
.clock. h-1>DIV,
.clock. h-2>DIV,
.clock. m-1>DIV,
.clock. m-2>DIV,
.clock. s-1>DIV,
.clock. s-2>DIV {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
.clock TIME {
/* clock */
 float: left;
 width: calc(40px);
 height: calc(40px);
 display: block;
 background: #eeeeee;
 border-radius: 50%;
 position: relative;
/* the hands */
}
.clock TIME SPAN {
 position: absolute;
}
.clock TIME:before,
.clock TIME:after {
 border-radius: 1%;
 content:"";
 display: block;
 width: 2px;
 height: 50%;
 background: #424242;
 left: 50%;
 position: absolute;
 transform: translateX(-1px);
 transform-origin: center bottom;
 transition: all 1s;
}
.n-0. t-01:before{transform:rotate(180deg)}.n-0. t-01:after{transform:rotate(90deg)}.n-0. t-02:before{transform:rotate(270deg)}.n-0. t-02:after{transform:rotate(90deg)}.n-0. t-03:before{transform:rotate(270deg)}.n-0. t-03:after{transform:rotate(90deg)}.n-0. t-04:before{transform:rotate(270deg)}.n-0. t-04:after{transform:rotate(180deg)}.n-0. t-05:before{transform:rotate(360deg)}.n-0. t-05:after,.n-0. t-06:before{transform:rotate(180deg)}.n-0. t-06:after{transform:rotate(90deg)}.n-0. t-07:before{transform:rotate(270deg)}.n-0. t-07:after{transform:rotate(180deg)}.n-0. t-08:before{transform:rotate(360deg)}.n-0. t-08:after{transform:rotate(180deg)}.n-0. t-09:before{transform:rotate(360deg)}.n-0. t-09:after{transform:rotate(180deg)}.n-0. t-10:before{transform:rotate(360deg)}.n-0. t-10:after{transform:rotate(180deg)}.n-0. t-11:before{transform:rotate(360deg)}.n-0. t-11:after{transform:rotate(180deg)}.n-0. t-12:before{transform:rotate(360deg)}.n-0. t-12:after{transform:rotate(180deg)}.n-0. t-13:before{transform:rotate(360deg)}.n-0. t-13:after{transform:rotate(180deg)}.n-0. t-14:before{transform:rotate(360deg)}.n-0. t-14:after{transform:rotate(180deg)}.n-0. t-15:before{transform:rotate(360deg)}.n-0. t-15:after{transform:rotate(180deg)}.n-0. t-16:before{transform:rotate(360deg)}.n-0. t-16:after{transform:rotate(180deg)}.n-0. t-17:before{transform:rotate(360deg)}.n-0. t-17:after{transform:rotate(180deg)}.n-0. t-18:before{transform:rotate(90deg)}.n-0. t-18:after{transform:rotate(0)}.n-0. t-19:before{transform:rotate(270deg)}.n-0. t-19:after{transform:rotate(0)}.n-0. t-20:before{transform:rotate(360deg)}.n-0. t-20:after{transform:rotate(180deg)}.n-0. t-21:before{transform:rotate(90deg)}.n-0. t-21:after{transform:rotate(0)}.n-0. t-22:before{transform:rotate(270deg)}.n-0. t-22:after{transform:rotate(90deg)}.n-0. t-23:before{transform:rotate(270deg)}.n-0. t-23:after{transform:rotate(90deg)}.n-0. t-24:before{transform:rotate(270deg)}.n-0. t-24:after{transform:rotate(0)}.n-1. t-01:before{transform:rotate(180deg)}.n-1. t-01:after{transform:rotate(90deg)}.n-1. t-02:before{transform:rotate(270deg)}.n-1. t-02:after{transform:rotate(90deg)}.n-1. t-03:before{transform:rotate(270deg)}.n-1. t-03:after{transform:rotate(180deg)}.n-1. t-04:after,.n-1. t-04:before{transform:rotate(225deg)}.n-1. t-05:before{transform:rotate(360deg)}.n-1. t-05:after{transform:rotate(90deg)}.n-1. t-06:before{transform:rotate(270deg)}.n-1. t-06:after{transform:rotate(180deg)}.n-1. t-07:before{transform:rotate(360deg)}.n-1. t-07:after{transform:rotate(180deg)}.n-1. t-08:after,.n-1. t-08:before,.n-1. t-09:after,.n-1. t-09:before{transform:rotate(225deg)}.n-1. t-10:before{transform:rotate(360deg)}.n-1. t-10:after{transform:rotate(180deg)}.n-1. t-11:before{transform:rotate(360deg)}.n-1. t-11:after{transform:rotate(180deg)}.n-1. t-12:after,.n-1. t-12:before,.n-1. t-13:after,.n-1. t-13:before{transform:rotate(225deg)}.n-1. t-14:before{transform:rotate(360deg)}.n-1. t-14:after{transform:rotate(180deg)}.n-1. t-15:before{transform:rotate(360deg)}.n-1. t-15:after{transform:rotate(180deg)}.n-1. t-16:after,.n-1. t-16:before{transform:rotate(225deg)}.n-1. t-17:before{transform:rotate(180deg)}.n-1. t-17:after{transform:rotate(90deg)}.n-1. t-18:before{transform:rotate(270deg)}.n-1. t-18:after{transform:rotate(0)}.n-1. t-19:before{transform:rotate(360deg)}.n-1. t-19:after{transform:rotate(90deg)}.n-1. t-20:before{transform:rotate(270deg)}.n-1. t-20:after{transform:rotate(180deg)}.n-1. t-21:before{transform:rotate(90deg)}.n-1. t-21:after{transform:rotate(0)}.n-1. t-22:before{transform:rotate(270deg)}.n-1. t-22:after{transform:rotate(90deg)}.n-1. t-23:before{transform:rotate(270deg)}.n-1. t-23:after{transform:rotate(90deg)}.n-1. t-24:before{transform:rotate(270deg)}.n-1. t-24:after{transform:rotate(0)}.n-2. t-01:before{transform:rotate(180deg)}.n-2. t-01:after{transform:rotate(90deg)}.n-2. t-02:before{transform:rotate(270deg)}.n-2. t-02:after{transform:rotate(90deg)}.n-2. t-03:before{transform:rotate(270deg)}.n-2. t-03:after{transform:rotate(90deg)}.n-2. t-04:before{transform:rotate(270deg)}.n-2. t-04:after{transform:rotate(180deg)}.n-2. t-05:before{transform:rotate(360deg)}.n-2. t-05:after{transform:rotate(90deg)}.n-2. t-06:before{transform:rotate(270deg)}.n-2. t-06:after{transform:rotate(90deg)}.n-2. t-07:before{transform:rotate(270deg)}.n-2. t-07:after{transform:rotate(180deg)}.n-2. t-08:before{transform:rotate(360deg)}.n-2. t-08:after{transform:rotate(180deg)}.n-2. t-09:before{transform:rotate(90deg)}.n-2. t-09:after{transform:rotate(180deg)}.n-2. t-10:before{transform:rotate(270deg)}.n-2. t-10:after{transform:rotate(90deg)}.n-2. t-11:before{transform:rotate(360deg)}.n-2. t-11:after{transform:rotate(270deg)}.n-2. t-12:before{transform:rotate(360deg)}.n-2. t-12:after{transform:rotate(180deg)}.n-2. t-13:before{transform:rotate(360deg)}.n-2. t-13:after{transform:rotate(180deg)}.n-2. t-14:before{transform:rotate(90deg)}.n-2. t-14:after{transform:rotate(180deg)}.n-2. t-15:before{transform:rotate(270deg)}.n-2. t-15:after{transform:rotate(90deg)}.n-2. t-16:before{transform:rotate(270deg)}.n-2. t-16:after{transform:rotate(0)}.n-2. t-17:before{transform:rotate(360deg)}.n-2. t-17:after{transform:rotate(180deg)}.n-2. t-18:before{transform:rotate(90deg)}.n-2. t-18:after{transform:rotate(0)}.n-2. t-19:before{transform:rotate(270deg)}.n-2. t-19:after{transform:rotate(90deg)}.n-2. t-20:before{transform:rotate(270deg)}.n-2. t-20:after{transform:rotate(180deg)}.n-2. t-21:before{transform:rotate(90deg)}.n-2. t-21:after{transform:rotate(0)}.n-2. t-22:before{transform:rotate(270deg)}.n-2. t-22:after{transform:rotate(90deg)}.n-2. t-23:before{transform:rotate(270deg)}.n-2. t-23:after{transform:rotate(90deg)}.n-2. t-24:before{transform:rotate(270deg)}.n-2. t-24:after{transform:rotate(0)}.n-3. t-01:before{transform:rotate(180deg)}.n-3. t-01:after{transform:rotate(90deg)}.n-3. t-02:before{transform:rotate(270deg)}.n-3. t-02:after{transform:rotate(90deg)}.n-3. t-03:before{transform:rotate(270deg)}.n-3. t-03:after{transform:rotate(90deg)}.n-3. t-04:before{transform:rotate(270deg)}.n-3. t-04:after{transform:rotate(180deg)}.n-3. t-05:before{transform:rotate(360deg)}.n-3. t-05:after{transform:rotate(90deg)}.n-3. t-06:before{transform:rotate(270deg)}.n-3. t-06:after{transform:rotate(90deg)}.n-3. t-07:before{transform:rotate(270deg)}.n-3. t-07:after{transform:rotate(180deg)}.n-3. t-08:before{transform:rotate(360deg)}.n-3. t-08:after{transform:rotate(180deg)}.n-3. t-09:before{transform:rotate(90deg)}.n-3. t-09:after{transform:rotate(180deg)}.n-3. t-10:before{transform:rotate(270deg)}.n-3. t-10:after{transform:rotate(90deg)}.n-3. t-11:before{transform:rotate(360deg)}.n-3. t-11:after{transform:rotate(270deg)}.n-3. t-12:before{transform:rotate(360deg)}.n-3. t-12:after{transform:rotate(180deg)}.n-3. t-13:before{transform:rotate(360deg)}.n-3. t-13:after{transform:rotate(90deg)}.n-3. t-14:before{transform:rotate(270deg)}.n-3. t-14:after{transform:rotate(90deg)}.n-3. t-15:before{transform:rotate(270deg)}.n-3. t-15:after{transform:rotate(180deg)}.n-3. t-16:before{transform:rotate(360deg)}.n-3. t-16:after,.n-3. t-17:before{transform:rotate(180deg)}.n-3. t-17:after{transform:rotate(90deg)}.n-3. t-18:before{transform:rotate(270deg)}.n-3. t-18:after{transform:rotate(90deg)}.n-3. t-19:before{transform:rotate(270deg)}.n-3. t-19:after{transform:rotate(0)}.n-3. t-20:before{transform:rotate(360deg)}.n-3. t-20:after{transform:rotate(180deg)}.n-3. t-21:before{transform:rotate(90deg)}.n-3. t-21:after{transform:rotate(0)}.n-3. t-22:before{transform:rotate(270deg)}.n-3. t-22:after{transform:rotate(90deg)}.n-3. t-23:before{transform:rotate(270deg)}.n-3. t-23:after{transform:rotate(90deg)}.n-3. t-24:before{transform:rotate(270deg)}.n-3. t-24:after{transform:rotate(0)}.n-4. t-01:before{transform:rotate(90deg)}.n-4. t-01:after{transform:rotate(180deg)}.n-4. t-02:before{transform:rotate(270deg)}.n-4. t-02:after{transform:rotate(180deg)}.n-4. t-03:after,.n-4. t-03:before,.n-4. t-04:after,.n-4. t-04:before{transform:rotate(225deg)}.n-4. t-05:before{transform:rotate(360deg)}.n-4. t-05:after{transform:rotate(180deg)}.n-4. t-06:before{transform:rotate(360deg)}.n-4. t-06:after{transform:rotate(180deg)}.n-4. t-07:after,.n-4. t-07:before,.n-4. t-08:after,.n-4. t-08:before{transform:rotate(225deg)}.n-4. t-09:before{transform:rotate(360deg)}.n-4. t-09:after{transform:rotate(180deg)}.n-4. t-10:before{transform:rotate(360deg)}.n-4. t-10:after,.n-4. t-11:before{transform:rotate(180deg)}.n-4. t-11:after{transform:rotate(90deg)}.n-4. t-12:before{transform:rotate(270deg)}.n-4. t-12:after{transform:rotate(180deg)}.n-4. t-13:before{transform:rotate(360deg)}.n-4. t-13:after{transform:rotate(180deg)}.n-4. t-14:before{transform:rotate(360deg)}.n-4. t-14:after{transform:rotate(90deg)}.n-4. t-15:before{transform:rotate(270deg)}.n-4. t-15:after{transform:rotate(0)}.n-4. t-16:before{transform:rotate(360deg)}.n-4. t-16:after{transform:rotate(90deg)}.n-4. t-17:before{transform:rotate(360deg)}.n-4. t-17:after{transform:rotate(90deg)}.n-4. t-18:before{transform:rotate(270deg)}.n-4. t-18:after{transform:rotate(90deg)}.n-4. t-19:before{transform:rotate(270deg)}.n-4. t-19:after{transform:rotate(180deg)}.n-4. t-20:before{transform:rotate(90deg)}.n-4. t-20:after{transform:rotate(180deg)}.n-4. t-21:after,.n-4. t-21:before,.n-4. t-22:after,.n-4. t-22:before{transform:rotate(225deg)}.n-4. t-23:before{transform:rotate(90deg)}.n-4. t-23:after{transform:rotate(0)}.n-4. t-24:before{transform:rotate(270deg)}.n-4. t-24:after{transform:rotate(0)}.n-5. t-01:before{transform:rotate(90deg)}.n-5. t-01:after{transform:rotate(180deg)}.n-5. t-02:before{transform:rotate(270deg)}.n-5. t-02:after{transform:rotate(90deg)}.n-5. t-03:before{transform:rotate(270deg)}.n-5. t-03:after{transform:rotate(90deg)}.n-5. t-04:before{transform:rotate(270deg)}.n-5. t-04:after{transform:rotate(180deg)}.n-5. t-05:before{transform:rotate(360deg)}.n-5. t-05:after{transform:rotate(180deg)}.n-5. t-06:before{transform:rotate(90deg)}.n-5. t-06:after{transform:rotate(180deg)}.n-5. t-07:before{transform:rotate(270deg)}.n-5. t-07:after{transform:rotate(90deg)}.n-5. t-08:before{transform:rotate(360deg)}.n-5. t-08:after{transform:rotate(270deg)}.n-5. t-09:before{transform:rotate(360deg)}.n-5. t-09:after{transform:rotate(180deg)}.n-5. t-10:before{transform:rotate(360deg)}.n-5. t-10:after{transform:rotate(90deg)}.n-5. t-11:before{transform:rotate(270deg)}.n-5. t-11:after{transform:rotate(90deg)}.n-5. t-12:before{transform:rotate(270deg)}.n-5. t-12:after{transform:rotate(180deg)}.n-5. t-13:before{transform:rotate(360deg)}.n-5. t-13:after{transform:rotate(90deg)}.n-5. t-14:before{transform:rotate(270deg)}.n-5. t-14:after{transform:rotate(90deg)}.n-5. t-15:before{transform:rotate(270deg)}.n-5. t-15:after{transform:rotate(180deg)}.n-5. t-16:before{transform:rotate(360deg)}.n-5. t-16:after,.n-5. t-17:before{transform:rotate(180deg)}.n-5. t-17:after{transform:rotate(90deg)}.n-5. t-18:before{transform:rotate(270deg)}.n-5. t-18:after{transform:rotate(90deg)}.n-5. t-19:before{transform:rotate(270deg)}.n-5. t-19:after{transform:rotate(0)}.n-5. t-20:before{transform:rotate(360deg)}.n-5. t-20:after{transform:rotate(180deg)}.n-5. t-21:before{transform:rotate(360deg)}.n-5. t-21:after{transform:rotate(90deg)}.n-5. t-22:before{transform:rotate(270deg)}.n-5. t-22:after{transform:rotate(90deg)}.n-5. t-23:before{transform:rotate(270deg)}.n-5. t-23:after{transform:rotate(90deg)}.n-5. t-24:before{transform:rotate(270deg)}.n-5. t-24:after{transform:rotate(0)}.n-6. t-01:before{transform:rotate(90deg)}.n-6. t-01:after{transform:rotate(180deg)}.n-6. t-02:before{transform:rotate(270deg)}.n-6. t-02:after{transform:rotate(90deg)}.n-6. t-03:before{transform:rotate(270deg)}.n-6. t-03:after{transform:rotate(90deg)}.n-6. t-04:before{transform:rotate(270deg)}.n-6. t-04:after{transform:rotate(180deg)}.n-6. t-05:before{transform:rotate(360deg)}.n-6. t-05:after{transform:rotate(180deg)}.n-6. t-06:before{transform:rotate(90deg)}.n-6. t-06:after{transform:rotate(180deg)}.n-6. t-07:before{transform:rotate(270deg)}.n-6. t-07:after{transform:rotate(90deg)}.n-6. t-08:before{transform:rotate(360deg)}.n-6. t-08:after{transform:rotate(270deg)}.n-6. t-09:before{transform:rotate(360deg)}.n-6. t-09:after{transform:rotate(180deg)}.n-6. t-10:before{transform:rotate(360deg)}.n-6. t-10:after{transform:rotate(90deg)}.n-6. t-11:before{transform:rotate(270deg)}.n-6. t-11:after{transform:rotate(90deg)}.n-6. t-12:before{transform:rotate(270deg)}.n-6. t-12:after{transform:rotate(180deg)}.n-6. t-13:before{transform:rotate(360deg)}.n-6. t-13:after,.n-6. t-14:before{transform:rotate(180deg)}.n-6. t-14:after{transform:rotate(90deg)}.n-6. t-15:before{transform:rotate(270deg)}.n-6. t-15:after{transform:rotate(180deg)}.n-6. t-16:before{transform:rotate(360deg)}.n-6. t-16:after{transform:rotate(180deg)}.n-6. t-17:before{transform:rotate(360deg)}.n-6. t-17:after{transform:rotate(180deg)}.n-6. t-18:before{transform:rotate(360deg)}.n-6. t-18:after{transform:rotate(90deg)}.n-6. t-19:before{transform:rotate(270deg)}.n-6. t-19:after{transform:rotate(0)}.n-6. t-20:before{transform:rotate(360deg)}.n-6. t-20:after{transform:rotate(180deg)}.n-6. t-21:before{transform:rotate(360deg)}.n-6. t-21:after{transform:rotate(90deg)}.n-6. t-22:before{transform:rotate(270deg)}.n-6. t-22:after{transform:rotate(90deg)}.n-6. t-23:before{transform:rotate(270deg)}.n-6. t-23:after{transform:rotate(90deg)}.n-6. t-24:before{transform:rotate(270deg)}.n-6. t-24:after{transform:rotate(0)}.n-7. t-01:before{transform:rotate(180deg)}.n-7. t-01:after{transform:rotate(90deg)}.n-7. t-02:before{transform:rotate(270deg)}.n-7. t-02:after{transform:rotate(90deg)}.n-7. t-03:before{transform:rotate(270deg)}.n-7. t-03:after{transform:rotate(90deg)}.n-7. t-04:before{transform:rotate(270deg)}.n-7. t-04:after{transform:rotate(180deg)}.n-7. t-05:before{transform:rotate(360deg)}.n-7. t-05:after{transform:rotate(90deg)}.n-7. t-06:before{transform:rotate(270deg)}.n-7. t-06:after{transform:rotate(90deg)}.n-7. t-07:before{transform:rotate(270deg)}.n-7. t-07:after{transform:rotate(180deg)}.n-7. t-08:before{transform:rotate(360deg)}.n-7. t-08:after{transform:rotate(180deg)}.n-7. t-09:after,.n-7. t-09:before,.n-7. t-10:after,.n-7. t-10:before{transform:rotate(225deg)}.n-7. t-11:before{transform:rotate(360deg)}.n-7. t-11:after{transform:rotate(180deg)}.n-7. t-12:before{transform:rotate(360deg)}.n-7. t-12:after{transform:rotate(180deg)}.n-7. t-13:after,.n-7. t-13:before,.n-7. t-14:after,.n-7. t-14:before{transform:rotate(225deg)}.n-7. t-15:before{transform:rotate(360deg)}.n-7. t-15:after{transform:rotate(180deg)}.n-7. t-16:before{transform:rotate(360deg)}.n-7. t-16:after{transform:rotate(180deg)}.n-7. t-17:after,.n-7. t-17:before,.n-7. t-18:after,.n-7. t-18:before{transform:rotate(225deg)}.n-7. t-19:before{transform:rotate(360deg)}.n-7. t-19:after{transform:rotate(180deg)}.n-7. t-20:before{transform:rotate(360deg)}.n-7. t-20:after{transform:rotate(180deg)}.n-7. t-21:after,.n-7. t-21:before,.n-7. t-22:after,.n-7. t-22:before{transform:rotate(225deg)}.n-7. t-23:before{transform:rotate(90deg)}.n-7. t-23:after{transform:rotate(0)}.n-7. t-24:before{transform:rotate(270deg)}.n-7. t-24:after{transform:rotate(0)}.n-8. t-01:before{transform:rotate(90deg)}.n-8. t-01:after{transform:rotate(180deg)}.n-8. t-02:before{transform:rotate(270deg)}.n-8. t-02:after{transform:rotate(90deg)}.n-8. t-03:before{transform:rotate(270deg)}.n-8. t-03:after{transform:rotate(90deg)}.n-8. t-04:before{transform:rotate(270deg)}.n-8. t-04:after{transform:rotate(180deg)}.n-8. t-05:before{transform:rotate(360deg)}.n-8. t-05:after{transform:rotate(180deg)}.n-8. t-06:before{transform:rotate(90deg)}.n-8. t-06:after{transform:rotate(180deg)}.n-8. t-07:before{transform:rotate(270deg)}.n-8. t-07:after{transform:rotate(180deg)}.n-8. t-08:before{transform:rotate(360deg)}.n-8. t-08:after{transform:rotate(180deg)}.n-8. t-09:before{transform:rotate(360deg)}.n-8. t-09:after{transform:rotate(180deg)}.n-8. t-10:before{transform:rotate(360deg)}.n-8. t-10:after{transform:rotate(90deg)}.n-8. t-11:before{transform:rotate(270deg)}.n-8. t-11:after{transform:rotate(0)}.n-8. t-12:before{transform:rotate(360deg)}.n-8. t-12:after{transform:rotate(180deg)}.n-8. t-13:before{transform:rotate(360deg)}.n-8. t-13:after,.n-8. t-14:before{transform:rotate(180deg)}.n-8. t-14:after{transform:rotate(90deg)}.n-8. t-15:before{transform:rotate(270deg)}.n-8. t-15:after{transform:rotate(180deg)}.n-8. t-16:before{transform:rotate(360deg)}.n-8. t-16:after{transform:rotate(180deg)}.n-8. t-17:before{transform:rotate(360deg)}.n-8. t-17:after{transform:rotate(180deg)}.n-8. t-18:before{transform:rotate(360deg)}.n-8. t-18:after{transform:rotate(90deg)}.n-8. t-19:before{transform:rotate(270deg)}.n-8. t-19:after{transform:rotate(0)}.n-8. t-20:before{transform:rotate(360deg)}.n-8. t-20:after{transform:rotate(180deg)}.n-8. t-21:before{transform:rotate(360deg)}.n-8. t-21:after{transform:rotate(90deg)}.n-8. t-22:before{transform:rotate(270deg)}.n-8. t-22:after{transform:rotate(90deg)}.n-8. t-23:before{transform:rotate(270deg)}.n-8. t-23:after{transform:rotate(90deg)}.n-8. t-24:before{transform:rotate(270deg)}.n-8. t-24:after{transform:rotate(0)}.n-9. t-01:before{transform:rotate(90deg)}.n-9. t-01:after{transform:rotate(180deg)}.n-9. t-02:before{transform:rotate(270deg)}.n-9. t-02:after{transform:rotate(90deg)}.n-9. t-03:before{transform:rotate(270deg)}.n-9. t-03:after{transform:rotate(90deg)}.n-9. t-04:before{transform:rotate(270deg)}.n-9. t-04:after{transform:rotate(180deg)}.n-9. t-05:before{transform:rotate(360deg)}.n-9. t-05:after{transform:rotate(180deg)}.n-9. t-06:before{transform:rotate(90deg)}.n-9. t-06:after{transform:rotate(180deg)}.n-9. t-07:before{transform:rotate(270deg)}.n-9. t-07:after{transform:rotate(180deg)}.n-9. t-08:before{transform:rotate(360deg)}.n-9. t-08:after{transform:rotate(180deg)}.n-9. t-09:before{transform:rotate(360deg)}.n-9. t-09:after{transform:rotate(180deg)}.n-9. t-10:before{transform:rotate(360deg)}.n-9. t-10:after{transform:rotate(90deg)}.n-9. t-11:before{transform:rotate(270deg)}.n-9. t-11:after{transform:rotate(0)}.n-9. t-12:before{transform:rotate(360deg)}.n-9. t-12:after{transform:rotate(180deg)}.n-9. t-13:before{transform:rotate(360deg)}.n-9. t-13:after{transform:rotate(90deg)}.n-9. t-14:before{transform:rotate(270deg)}.n-9. t-14:after{transform:rotate(90deg)}.n-9. t-15:before{transform:rotate(270deg)}.n-9. t-15:after{transform:rotate(180deg)}.n-9. t-16:before{transform:rotate(360deg)}.n-9. t-16:after{transform:rotate(180deg)}.n-9. t-17:before{transform:rotate(90deg)}.n-9. t-17:after{transform:rotate(180deg)}.n-9. t-18:before{transform:rotate(270deg)}.n-9. t-18:after{transform:rotate(90deg)}.n-9. t-19:before{transform:rotate(270deg)}.n-9. t-19:after{transform:rotate(0)}.n-9. t-20:before{transform:rotate(360deg)}.n-9. t-20:after{transform:rotate(180deg)}.n-9. t-21:before{transform:rotate(360deg)}.n-9. t-21:after{transform:rotate(90deg)}.n-9. t-22:before{transform:rotate(270deg)}.n-9. t-22:after{transform:rotate(90deg)}.n-9. t-23:before{transform:rotate(270deg)}.n-9. t-23:after{transform:rotate(90deg)}.n-9. t-24:before{transform:rotate(270deg)}.n-9. t-24:after{transform:rotate(0)}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clock">
 <div class="seconds">
 <div class="s-1">
 <div class="n-0">
 <time class="t-01"></time>
 <time class="t-02"></time>
 <time class="t-03"></time>
 <time class="t-04"></time>
 <time class="t-05"></time>
 <time class="t-06"></time>
 <time class="t-07"></time>
 <time class="t-08"></time>
 <time class="t-09"></time>
 <time class="t-10"></time>
 <time class="t-11"></time>
 <time class="t-12"></time>
 <time class="t-13"></time>
 <time class="t-14"></time>
 <time class="t-15"></time>
 <time class="t-16"></time>
 <time class="t-17"></time>
 <time class="t-18"></time>
 <time class="t-19"></time>
 <time class="t-20"></time>
 <time class="t-21"></time>
 <time class="t-22"></time>
 <time class="t-23"></time>
 <time class="t-24"></time>
 </div>
 </div>
 </div>
 <div class="s-2">
 <div class="n-1">
 <time class="t-01"></time>
 <time class="t-02"></time>
 <time class="t-03"></time>
 <time class="t-04"></time>
 <time class="t-05"></time>
 <time class="t-06"></time>
 <time class="t-07"></time>
 <time class="t-08"></time>
 <time class="t-09"></time>
 <time class="t-10"></time>
 <time class="t-11"></time>
 <time class="t-12"></time>
 <time class="t-13"></time>
 <time class="t-14"></time>
 <time class="t-15"></time>
 <time class="t-16"></time>
 <time class="t-17"></time>
 <time class="t-18"></time>
 <time class="t-19"></time>
 <time class="t-20"></time>
 <time class="t-21"></time>
 <time class="t-22"></time>
 <time class="t-23"></time>
 <time class="t-24"></time>
 </div>
 </div>
</div>
</div>
时间:原作者:0个回答

89 4

setTimeout 是非阻塞的。它只指定在指定时间之后调用的回调函数。

这意味着在你的示例中,由于 setTimeout ( 不是它的回调)的执行不会阻止循环执行,所有 setTimeout 语句都会正确执行。

简单的解决方案是将循环回调的sec 参数乘以 setTimeout 中指定的延迟:

$.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);
});

JSFiddle: [ https://jsfiddle.net/j76bwrpv/2/1.

原作者:
73 3

尝试将setTimeOut放置在循环的末尾:

$.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);
});
原作者:
77 2

这可能会帮助你,非常简单的计数器,这里是工作的演示。

//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(); 
原作者:
129 3

我非常喜欢你的想法。通过它,我在下面创建了 POC:

https://jsfiddle.net/abinthaha/62wuzvx3/28/

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;
}
原作者:
...