Run jquery each loop with a delay between each loop

Question

Below I am using $.each to loop through the seconds array.

I am trying to delay each loop by 1 second. But having odd results with the method I am using.

// 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>

appreciate you, for the css you wrote with patience. @joshmoto — chintuyadavsara
– chintuyadavsara, Commented Sep 14, 2018 at 9:52

Abin Thaha Azees · Accepted Answer · 2018-09-14 10:11:30Z

1

I really liked your idea. Inspired by it, I created the POC below:

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

answered Sep 14, 2018 at 10:11

Abin Thaha Azees

4,7633 gold badges16 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

joshmoto Over a year ago

This is awesome, getting the seconds from the current date and the math on the setValue is genius! I'm still trying to understand the getSec function but its magic mate. Thanks.

joshmoto Over a year ago

I don't suppose you could help me make this into a clock using your same logic? jsfiddle.net/joshmoto/rnq1mvfs

Abin Thaha Azees Over a year ago

Thanks mahn, I can help you do the same. I am so happy to. Let me work on it and will update it once I am done

Abin Thaha Azees Over a year ago

Hi, This is something I did with Hours, minutes, and seconds. But the alignment is now column wise, Need to work on it to show it in a row. Please use it. jsfiddle.net/abinthaha/n4tL0ok2/2

joshmoto Over a year ago

Hey abinthaha sorry i just got round to looking at this. This is awesome dude, thank you very much. I will use this. Works so good. Again thank you!

|

Jacob Mellin · Accepted Answer · 2018-09-14 10:09:15Z

setTimeout is non-blocking. It only specifies a callback function to be called after a specified amount of time, but any code after it will be immediately executed, regardless of the delay specified.

This means that in your example, since the execution of setTimeout (not its callback) does not block the execution of the loop, all setTimeout statements are executed right after each other, so the delays are not staggered.

A simple solution would be to multiply the sec parameter of the loop callback by the specified delay in 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

Thiago Guelfi · Accepted Answer · 2018-09-14 09:44:25Z

0

try to place setTimeOut at the end of loop:

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

});

answered Sep 14, 2018 at 9:44

Thiago Guelfi

263 bronze badges

1 Comment

Rory McCrossan Over a year ago

This won't work. The content within the timeout will be delayed, but the $.each() will continue to iterate immediately.

chintuyadavsara · Accepted Answer · 2018-09-14 09:48:06Z

This might help you, very simple counter, Here is the working demo

// 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();

Collectives™ on Stack Overflow

Run jquery each loop with a delay between each loop

4 Answers 4

7 Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

1 Comment

Comments

Related