Форум

wet · #1 (**permalink**) 12.07.2016, 10:54

Подскажите кто-нибудь где допустил ошибку, почему таймер не обнуляется? Нужно чтобы через определенный интервал (к примеру 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);

рони · #2 (**permalink**) 12.07.2016, 11:10

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>

wet · #3 (**permalink**) 12.07.2016, 12:10

Спасибо за помощь, работает, правда не совсем так как нужно. Мне нужно что то в духе бесконечного цикла, чтобы функция сама себя вызывала. Я немного дописал как нужно, но работает косячно

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

Подскажит е кто нибудь, почему при запуске функции самой себя начинаются баги?

рони · #4 (**permalink**) 12.07.2016, 12:20

wet,
попробуйте никогда не использовать setInterval или сформулировать более доходчиво ваш алгоритм.

warren buffet · #5 (**permalink**) 12.07.2016, 16:53

Забавное применение each. Буквально event-driven application )))

warren buffet · #6 (**permalink**) 12.07.2016, 17:57

Ладно, я тоже ничего не понял ни в кодах, ни в заявке. Наверно ему надо чтобы все таймеры смотались и исчезли, поскольку попыток восстановить их не замечено. Можно все загнать в объект и чакать по нормальным переменным.

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

wet · #7 (**permalink**) 13.07.2016, 05:59

Более точнее объясняю: в блоках data-sec постоянно обновляется цифры, надо просто взять эти цифры, преобразовать их во время и добавить в span (должна отображаться каждая секунда). И такая операция должна проходить, к примеру, каждые 10 сек. Что тут не понятного? И просьба комменты типа "это говно код" просьба писать на другие форумы, специализированные на флуде))

рони · #8 (**permalink**) 13.07.2016, 09:31

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

Форум

Справочник

Discord чат

Курсы javascript