Вход

Просмотр полной версии : работа с clearInterval


Nifler
14.05.2015, 13:18
День добрый
написал я вот такой код, он занимается тем, что выпихивает построчно текст из-за рамки так чтобы его было видно. Код работает и текст летает. вот сам код.

var nth=1;
var i=1;
function leftText(){
$('ul.slides>li:nth-child('+nth+')>article>div>ul>li:nth-child('+i+')').animate({
'margin-left':'500px'
},'slow');
if(i==12){
clearInterval(timerId);
}
}
var timerId = setInterval(function(){leftText(); i++}, 300);

по сути он находит список и поочередно совает его элементы. но вот в чем вопрос: верно ли я закончил выполнение setInterval? так как, когда я поставил после clearInterval alert, то он мне нескончаемое количество сообщений вывел. можно ли заканчивать циклическое выполнение функции внутри функции которую вызывает эта функция?

ksa
14.05.2015, 15:38
можно ли заканчивать циклическое выполнение функции внутри функции которую вызывает эта функция?
Бивас, тест! (с) :D

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
var i=1;
function test(){
$('#info').text(i);
if(i==12){
clearInterval(timerId);
}
}
var timerId = setInterval(function(){test(); i++}, 300);
});
</script>
</head>
<body>
<div id="info"></div>
</body>
</html>

Таки можно! :)

Aetae
14.05.2015, 15:46
Возможно проверочный алерт был засунут не туда куда нужно.)<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
var i=1;
function test(){
$('#info').text(i);
if(i==12){
alert('конец');
clearInterval(timerId);
}
}
var timerId = setInterval(function(){test(); i++}, 300);
});
</script>
</head>
<body>
<div id="info"></div>
</body>
</html>

Nifler
14.05.2015, 15:57
разобрался, я проверял изменение DOM вечной циклической функцией, которая постоянно повторяла запуск всех этих моих функций. и она клепала запуски алерта. теперь пытаюсь понять как работает MutationObserver...

Aetae
14.05.2015, 16:26
Nifler, а что там непонятного - в обсервер стекуется история изменения документа без блокировки чтоб не тормозить обработку, и функция вызывается в ближайший свободный промежуток вываливая всё что накопилось.

//Хотя всё равно обидно, что от MutatonEvents полностью отказались, для юзерскриптов часто полезная фича была, а теперь приходится расширения писать в некоторых случаях.

Nifler
16.05.2015, 04:29
Nifler, а что там непонятного - в обсервер стекуется история изменения документа без блокировки чтоб не тормозить обработку, и функция вызывается в ближайший свободный промежуток вываливая всё что накопилось.

//Хотя всё равно обидно, что от MutatonEvents полностью отказались, для юзерскриптов часто полезная фича была, а теперь приходится расширения писать в некоторых случаях.

для меня js это магия, большая великая магия. я ничего не понимаю как оно работает и почему оно работает, и нет времени нормально взяться выучить. эти функции в функциях просто выносят мозг и как работает обсервер теоретически я прочел, и понимаю то, что тут написано, но на практике реализовать не смог. если есть желание офигеть с кода, то вот: (function($,andefined){
$(document).ready(function(){
$("#mitka").css("margin-left","0");
function newSlide(){
for (var i=1; i<10; i++){
var margin=$("#mitka").css("margin-left");
if($(".slides>li:nth-child("+i+")").css("display")=="list-item"){
if(i+"px"!=margin){
$("#mitka").css("margin-left",i);
$('.slides>li:nth-child('+i+')>article>div>ul>li').css("margin-left","-500px");
var nth=i;
var j=1;
function leftText(){
$('ul.slides>li:nth-child('+nth+')>article>div>ul>li:nth-child('+j+')').animate({
'margin-left':'0px'
},'slow');
if(j==12){
//clearInterval(timerId);
}
}

timerId = setInterval(function(){leftText(); j++}, 200)

$(".li_slyde").removeClass("li_slyde");
var nextI=i+1;
$(".uk-navbar-nav>li:nth-child("+nextI+")").addClass("li_slyde");
}
}else{
}
}
}
setInterval(newSlide, 200);
})
})(jQuery)
это код, который высовывает текст на слайде, когда слайд листается. http://poli.molodost-dolgoletie.com/ вот тут он работает.
могу сказать что #mitka создан исключительно для того, чтобы запоминать в каком слайде мы находимся, так как я так и не смог это запомнить в переменной. остальное сделано при помощи такого же бреда.