文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >运行jquery每个循环，在每个循环之间有一个延迟。

问运行jquery每个循环，在每个循环之间有一个延迟。
EN

Stack Overflow用户
提问于 2018-09-14 09:21:16
回答 4查看 67关注 0票数 1

下面我使用$.each循环遍历seconds数组。

我试着把每个循环延迟1秒。但用我所用的方法得到了奇怪的结果。

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

​

代码语言：javascript
复制
// 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);

});
代码语言：javascript
复制
.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)}
*/
代码语言：javascript
复制
<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>

​

jquery
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-09-14 10:11:30

我真的很喜欢你的主意。受此启发，我创建了下面的POC：

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

代码语言：javascript
复制
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;
}
票数 1
EN

Stack Overflow用户

发布于 2018-09-14 09:47:22

setTimeout是非阻塞的.它只指定要在指定的时间之后调用的回调函数，但无论指定的延迟如何，它之后的任何代码都将立即执行。

这意味着在您的示例中，由于setTimeout的执行(而不是它的回调)不会阻止循环的执行，所以所有setTimeout语句都会在彼此之后执行，因此延迟不会交错。

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

代码语言：javascript
复制
$.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 ]

票数 1
EN

Stack Overflow用户

发布于 2018-09-14 09:44:25

尝试将setTimeOut放在循环的末尾：

代码语言：javascript
复制
$.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);

});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/52328817

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档