Обратный отсчет JS, продолжает перезапуск

1

Я лежу, поэтому, пожалуйста, будьте добрыми :-)

Я нашел идеальные обратные часы. То, что я хочу достичь, это то, что после 1 слова Lift Off! но почему-то часы обратного отсчета показывают 1

var startNum;
var currentNum;

function addClassDelayed(jqObj, c, to) {    
    setTimeout(function() { jqObj.addClass(c); }, to);
}

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);
  if (currentNum == 0)  $('#countdown').html("Lift Off!"); else currentNum--;
  $('#countdown').html(currentNum+1);
  $('#countdown').removeClass("puffer");
}

$(function() {
  startNum = 5; 
  currentNum = startNum;
  $("#countdown").html(currentNum); // init first time based on n
  self.setInterval(function(){anim()},1325);

});
Теги:

3 ответа

2
Лучший ответ

$('#countdown').html(currentNum+1); перезаписывает все, что вы установили ранее.

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);
  if (currentNum == 0) {
      $('#countdown').html("Lift Off!");
      clearInterval(token)
  } else {
      currentNum--;
      $('#countdown').html(currentNum+1); // Only show if not "Lift Off!"
  }
  $('#countdown').removeClass("puffer");
}

var token;
$(function() {
  startNum = 5; 
  currentNum = startNum;
  $("#countdown").html(currentNum); // init first time based on n
  token = self.setInterval(function(){anim()},1325);
});

Добавлено clearInverval за предложение Тайлера

Поделиться
  • 1
    Функция anim будет по-прежнему запускаться каждые 1,3 секунды до конца жизни страницы. Вероятно, хорошая идея, чтобы очистить интервал после его завершения тоже.
  • 0
    Куда мне положить clearInterval?
Показать ещё 7 комментариев
2

Давайте посмотрим в вашу функцию анимации:

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);
  if (currentNum == 0)  $('#countdown').html("Lift Off!"); else currentNum--;
  $('#countdown').html(currentNum+1);
  $('#countdown').removeClass("puffer");
}

Если фигурные скобки отсутствуют после if-утверждения, они подразумевают, что они применимы только к следующему утверждению (единственному). Исходя из этого, добавьте фигурные скобки вокруг частей кода, где они подразумеваются:

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);
  if (currentNum == 0) {
    $('#countdown').html("Lift Off!");
  } else {
    currentNum--;
  }
  $('#countdown').html(currentNum+1);
  $('#countdown').removeClass("puffer");
}

Исходя из этого, когда currentNum равно 0, содержимое #countdown становится "Lift Off!". затем немедленно измените на currentNum + 1. Вот почему он никогда не заканчивается, показывая "Lift Off!".

Этот код будет либо печатать "Lift Off!". или текущее число (которое затем уменьшается после получения ссылки):

var startNum;
var currentNum;
var countdownInterval;

function addClassDelayed(jqObj, c, to) {    
    setTimeout(function() { jqObj.addClass(c); }, to);
}

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);
  if (currentNum === 0) {
    $('#countdown').html('Lift Off!');
    clearInterval(countdownInterval);
  } else {
    $('#countdown').html(currentNum--);
  }
  $('#countdown').removeClass("puffer");
}

$(function() {
  startNum = 5; 
  currentNum = startNum;
  $("#countdown").html(currentNum); // init first time based on n
  countdownInterval = self.setInterval(function(){anim()},1325);
});
Поделиться
  • 2
    Я упоминал об этом в отдельном ответе, но могу ли я предложить очистить интервал после его завершения? Бесполезно вызывать функцию каждую секунду до конца жизненного цикла страницы, если она никогда больше ничего не сделает.
  • 0
    Я выбрал это как ответ, поскольку это объясняет мою ошибку подробно. Такс Крис. Еще один вопрос, куда мне поставить интервал очистки? После подъема?
Показать ещё 2 комментария
1

У вас есть ошибка в коде. Вы перезаписываете Lift off! после операторов if else.

function anim() { 
  addClassDelayed($("#countdown"), "puffer", 600);

  // Add a return statement here.
  if (currentNum == 0) {
      $('#countdown').html("Lift Off!");
      return;
  }

  else {
     currentNum--;
  }
  $('#countdown').html(currentNum+1);
  $('#countdown').removeClass("puffer");
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню