Таймер не обнуляется
Подскажите кто-нибудь где допустил ошибку, почему таймер не обнуляется? Нужно чтобы через определенный интервал (к примеру 10 сек) функция таймера брала значения из div
<div class="results full-height">
<div id="id1044" class="gray-line" data-sec="06">
( Осталось <span>01:00:00</span>)
</div>
<div id="id12369" class="gray-line" data-sec="3607">
( Осталось <span>01:00:01</span>)
</div>
</div>
function countDown(timestamp = 0, id){
if (timestamp < 0) timestamp = 0;
var day = Math.floor( (timestamp/60/60) / 24);
var hour = Math.floor(timestamp/60/60);
var mins = Math.floor((timestamp - hour*60*60)/60);
var secs = Math.floor(timestamp - hour*60*60 - mins*60);
var left_hour = Math.floor( (timestamp - day*24*60*60) / 60 / 60 );
if(String(mins).length <= 1)
{
mins = "0" + mins;
}
if(String(secs).length <= 1)
{
secs = "0" + secs;
}
$('#'+id+' span').html( '0'+left_hour+':'+mins+':'+secs );
}
function aaa(e=false){
$('.gray-line').each(function(){
var seconds = $(this).attr("data-sec");
var id = $(this).attr("id");
// запускаем таймер
var timer = setInterval(function(){
seconds = seconds - 1;
countDown(seconds, id);
// если время истекает скрываем блоки
if(seconds <= 0){
$('#'+id).hide();
}
}, 1000);
if (e)
{
clearInterval(timer);
}
});
}
// первая обработка данных
aaa();
// далее запрашиваем данные с определенным интервалом, чтобы инфа всегда была актуальной
setInterval(function(){ //alert('11');
aaa(true);
}, 10000);
|
wet,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
function countDown(timestamp, id){
if (timestamp < 0) timestamp = 0;
var day = Math.floor( (timestamp/60/60) / 24);
var hour = Math.floor(timestamp/60/60);
var mins = Math.floor((timestamp - hour*60*60)/60);
var secs = Math.floor(timestamp - hour*60*60 - mins*60);
var left_hour = Math.floor( (timestamp - day*24*60*60) / 60 / 60 );
if(String(mins).length <= 1)
{
mins = "0" + mins;
}
if(String(secs).length <= 1)
{
secs = "0" + secs;
}
$('#'+id+' span').html( '0'+left_hour+':'+mins+':'+secs );
}
function aaa(e){
$('.gray-line').each(function(i,el){
var seconds = $(el).attr("data-sec");
var id = el.id;
if (e)
{ alert('stop id = ' + id);
clearInterval(el.timer);
}
else{
// запускаем таймер
el.timer = setInterval(function(){
seconds = seconds - 1;
countDown(seconds, id);
// если время истекает скрываем блоки
if(seconds <= 0){
$('#'+id).hide();
}
}, 1000);
}
});
}
// первая обработка данных
aaa();
// далее запрашиваем данные с определенным интервалом, чтобы инфа всегда была актуальной
setInterval(function(){ //
aaa(true);
}, 10000);
});
</script>
</head>
<body>
<div class="results full-height">
<div id="id1044" class="gray-line" data-sec="06">
( Осталось <span>01:00:00</span>)
</div>
<div id="id12369" class="gray-line" data-sec="3607">
( Осталось <span>01:00:01</span>)
</div>
</div>
</body>
</html>
|
Спасибо за помощь, работает, правда не совсем так как нужно. Мне нужно что то в духе бесконечного цикла, чтобы функция сама себя вызывала. Я немного дописал как нужно, но работает косячно
function aaa(e){
var e = e || false;
$('.gray-line').each(function(i,el){
var seconds = $(el).attr("data-sec");
var id = el.id;
if (e)
{ alert('stop id = ' + id);
clearInterval(el.timer);
$('#'+id).show();
aaa();
}
else
{
// запускаем таймер
el.timer = setInterval(function(){
seconds = seconds - 1;
countDown(seconds, id);
// если время истекает скрываем блоки
if(seconds <= 0){
$('#'+id).hide();
}
}, 1000);
}
});
}
Подскажит е кто нибудь, почему при запуске функции самой себя начинаются баги? |
wet,
попробуйте никогда не использовать setInterval или сформулировать более доходчиво ваш алгоритм. |
Забавное применение each. Буквально event-driven application )))
|
Ладно, я тоже ничего не понял ни в кодах, ни в заявке. Наверно ему надо чтобы все таймеры смотались и исчезли, поскольку попыток восстановить их не замечено. Можно все загнать в объект и чакать по нормальным переменным.
<!DOCTYPE html><html lang="ru" dir="ltr"><head><meta charset="utf-8"></head><body>
<div class="results full-height">
<div id="id1044" class="gray-line" data-sec="06">( Осталось <span>01:00:00</span>)</div>
<div id="id12369" class="gray-line" data-sec="3607">( Осталось <span>01:00:00</span>)</div>
</div>
<script>
var elems=document.querySelectorAll('.gray-line'),
countDown=function(timestamp,id){
timestamp=timestamp||0;
var hour = Math.floor(timestamp/60/60),
mins = Math.floor((timestamp - hour*60*60)/60),
secs = Math.floor(timestamp - hour*60*60 - mins*60),
day = Math.floor((timestamp/60/60) / 24),
left_hour = Math.floor( (timestamp - day*24*60*60) / 60 / 60 );
if((''+mins).length <= 1)
mins = "0" + mins;
if((''+secs).length <= 1)
secs = "0" + secs;
document.querySelector('#'+id+' span').innerHTML='0'+left_hour+':'+mins+':'+secs;
},
start = function() {
elems[0].setAttribute('data-sec',20);
elems[1].setAttribute('data-sec',600);
var update=function(){
for(var i=0, elem; elem=elems[i]; i++) {
if(elem.style.display=='none') continue;
var sec = elem.getAttribute('data-sec')-1;
if(sec <= 0) {
elem.style.display='none';
++cnt;
}
else {
elem.setAttribute('data-sec',sec);
countDown(sec, elem.id);
}
}
if(cnt==elems.length)
clearInterval(timer);
},
cnt=0,
timer = setInterval(update, 1000);
};
start();
</script>
</body>
</html>
|
Более точнее объясняю: в блоках data-sec постоянно обновляется цифры, надо просто взять эти цифры, преобразовать их во время и добавить в span (должна отображаться каждая секунда). И такая операция должна проходить, к примеру, каждые 10 сек. Что тут не понятного? И просьба комменты типа "это говно код" просьба писать на другие форумы, специализированные на флуде))
|
wet,
:write: шифровка из центра ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
function f(a) {
a = Math.floor(a);
var b = Math.floor(a / 60),
c = Math.floor(b / 60);
a %= 60;
b %= 60;
return d(c % 24) + ":" + d(b) + ":" + d(a)
}
function d(a) {
return (9 < a ? "" : "0") + a
}
function e() {
$(".gray-line").each(function(a, b) {
var c = $(b).attr("data-sec");
b.timer = c;
$(b).stop().show("fast").animate({
timer: 0
}, {
step: function(a) {
$(b).html(f(a))
},
easing: "linear",
duration: 1E3 * c,
complete: function() {
$(b).hide()
}
})
});
window.setTimeout(e, 1E4)
}
e()
});
</script>
</head>
<body>
<div class="results full-height">
<div id="id1044" class="gray-line" data-sec="06">
( Осталось <span>01:00:00</span>)
</div>
<div id="id12369" class="gray-line" data-sec="3607">
( Осталось <span>01:00:01</span>)
</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 20:54. |