Не срабатывает разобраться с setInterval
Доброго всем времени суток. Мне нужно что бы функция в слайдере вызывающая следующую картинку, срабатывала через определённые промежутки времени и таким образом картинки менялись автоматически. Для этого я использую функцию setInterval, но проблема в том что она срабатывает всего один раз, причём сразу после загрузки. Подскажите что я делаю не так. Заранее всем благодарен)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
var slideIndex=1; showSlides(slideIndex); function plusSlides(n){ showSlides(slideIndex += n); } function currentSlide(n){ showSlides(slideIndex = n); } function showSlides(n){ var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if(n > slides.length){ slideIndex = 1; } if(n 1){ slideIndex = slides.length; } for(i=0; islides.length; i++){ slides[i].style.display = "none"; } for(i=0; i dots.length; i++){ dots[i].className = dots[i].className.replace("active",""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className+= " active"; } setInterval(plusSlides(slideIndex), 5000);
Почему setInterval срабатывает только один раз?
впервые столкнулся с этой функцией, и вот в чем проблема: new_image.style.opacity = 0.1;.
не могу разобраться с setInterval
Добрый день 🙂 имеется скрипт, выводящий текущие координаты мышки, привожу листинг <textarea.
Не могу разобраться с setInterval (замена цвета)
Хочу, чтобы каждую секунду цвет текста менялся с черного на оранжевый и обратно ("мигающий текст").
SetInterval срабатывает только один раз
Всем привет, Почему setInterval, срабатываеть только один раз? <script type="text/javascript">.
setInterval(plusSlides.bind(undefined, 1), 5000);
Спасибо помогло) но у меня есть ещё один вопрос: как сделать что бы при срабатывании функции, таймер обнулялся, и до вызова функции вновь оставалось 10 секунда.
Попробовал добавить переменную time и уже в неё записать количество миллисекунд для отсчёта, а затем в главной функции, присваивать ей вновь значение 10000 миллисекунд. Но к сожалению это не работает, хотя и значение переменой после срабатывания функции меняется.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
var slideIndex=1; var time = 10000; showSlides(slideIndex); function plusSlides(n){ showSlides(slideIndex += n); } function currentSlide(n){ showSlides(slideIndex = n); } function showSlides(n){ var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if(n > slides.length){ slideIndex = 1; } if(n 1){ slideIndex = slides.length; } for(i=0; islides.length; i++){ slides[i].style.display = "none"; } for(i=0; i dots.length; i++){ dots[i].className = dots[i].className.replace("active",""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className+= " active"; time = 10000; } setInterval(plusSlides.bind(undefined, 1), time);
Сообщение от Jasta 
как сделать что бы при срабатывании функции, таймер обнулялся, и до вызова функции вновь оставалось 10 секунда.
function foo() { // . setTimeout(foo, 10000); } foo();
Такая конструкция не очень работает в моем случае, всё дело в том что функция так же вызывается кнопками переключения между слайдами, и если нажать на кнопку то вызывается функция и setTimeout срабатывает, в результате слайды начинают сменять друг друга через разные интервалы, практически хаотично.
Видимо я в прошлый раз плохо объяснил в чем проблема, а она вот в чем: если кликнуть по кнопке следующий слайд скажем на 8 секунде после загрузки страницы, то слайд сменится, но уже через 2 секунды сработает, setInterval и он сменится снова. А мне нужно что бы каждый раз после срабатывания главной функции showSlides счётчик обнулялся, и от появления нового слайда, до вызова следующего вновь оставалось 10 секунд
Сообщение от Jasta
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
var slideIndex=1; showSlides(slideIndex); function plusSlides(n){ showSlides(slideIndex += n); } function currentSlide(n){ showSlides(slideIndex = n); } function showSlides(n){ var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if(n > slides.length){ slideIndex = 1; } if(n 1){ slideIndex = slides.length; } for(i=0; islides.length; i++){ slides[i].style.display = "none"; } for(i=0; i dots.length; i++){ dots[i].className = dots[i].className.replace("active",""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className+= " active"; clearTimeout(timeId); timeId(); } function timeId() { setTimeout(plusSlides.bind(undefined, 1), 10000); }
Функция setTimeout() возвращает id таймера, который и нужно будет поместить в функцию clearTimeout() для выключения таймера. В общем случае, это выглядит так:
var timerId = setTimeout(someFunction, duration); clearTimeout(timerId);
Да знаю я как эти функции работают, проблема в том что я не знаю как их встроить в код что бы обнулять счётчик((
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
Пробовал вот так: var slideIndex=1; showSlides(slideIndex); function plusSlides(n){ showSlides(slideIndex += n); } function currentSlide(n){ showSlides(slideIndex = n); } function showSlides(n){ var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if(n > slides.length){ slideIndex = 1; } if(n 1){ slideIndex = slides.length; } for(i=0; islides.length; i++){ slides[i].style.display = "none"; } for(i=0; i dots.length; i++){ dots[i].className = dots[i].className.replace("active",""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className+= " active"; clearInterval(timeId); var timeId = setInterval(plusSlides.bind(undefined, 1), 10000); }
Но опять же выходит полная фигня, при многократном вызове функции showSlides кликом на кнопки, setInterval так же многократно повторяется, в результате слайды начинают хаотично сменять друг друга(( К тому же если встроить setInterval в саму функцию showSlides, перестаёт верно передаваться аргумент, в результате чего, на второй итерации смена картинок прекращается, и начинает моргать одна вторая картинка((
Не работает setInterval
Задача при наведении курсора изменить прозрачность box-shadow c 0 до 0.5 за секунду, но этого не происходит. Подскажите в чем проблема. Спасибо.
не работает setInterval
Выдает Uncaught SyntaxError: Unexpected identifier подскажите что не так var timer =.
Не работает setInterval();
Подскажите, пожалуйста, почему код не перезапускается каждые 300 мс? <title>DOM.
setInterval не работает
Ну почему этот маленький зелёненький квадратик не хочет опускаться в низ? Я уже головой об стенку.
Без setInterval не работает
Привет всем! Продолжаю изучать JS. У меня назрел вот такой вопрос. Почему такой код отлично.
Похоже, что вы используете jquery, поэтому: 1. Убедитесь что правильно подключили библиотеку. 2. в библиотеке уже есть встроенная функция для вашего случая — animate у которой 2 параметра — значение до которого изменить нужный элемент, и второй параметр — время за которое нужно выполнить изменение.
Сообщение от Freeden
Мне кажется, что одна милисекунда — это маловато, чтобы успела выполниться функция forbut(), и на всё вместе трбуется порядком больше времени, чем одна секунда. Попробуйте задать setInterval — 10 или 20, а шаг увеличения asd соответственно 0.005 или 0.01
Сообщение было отмечено Taatshi как решение
Решение
Оказывается по-умолчанию в jquery отсутствует возможность изменять box-shadow. Нужен плагин, например этот. Для вашего случая подключается он так:
$(document).ready(function () { $("#b_reg").mouseenter(function() { $(this).animate({ boxShadow: '0 0 20px #44f'}); }) $("#b_reg").mouseout(function () { $(this).animate({boxShadow: false}); }) })
Сообщение было отмечено Taatshi как решение
Решение
SanychBY, у Вас, оказывается, в 6 строке функция forbut(idb) не взята в кавычки. Нужно:
var interbut = setInterval( » forbut(idb) » ,1);
Вообще, это всё можно сделать без jquery. Вот пример:
button id=knopka>Кнопка/button>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
script> a=document.getElementById("knopka"); var asd = 0; function forbut(){ a.style="box-shadow: 0 0 20px rgba(255, 2, 2, "+asd+")"; asd+=0.01; if(asd==0.5){ clearInterval(interbut); asd=0; } } a.onmouseenter=function(){ var interbut = setInterval("forbut()",20); } script> Опан, ваш код хорош, но нужно, чтобы он работал не зависимо от id(со всеми кнопками) по классу
Добавлено через 5 минут
Именно поэтому использовалась jq
Добавлено через 2 минуты
В принципе можно и на саму кнопку вешать событие
Сообщение от SanychBY
button onmouseenter="forbut(0)">Кнопка1/button> button onmouseenter="forbut(1)">Кнопка2/button>
1 2 3 4 5 6 7 8 9 10 11 12 13 14
script> a=document.getElementsByTagName("button"); var asd = 0; function forbut(b){ a[b].style="box-shadow: 0 0 20px rgba(255, 2, 2, "+asd+")"; asd+=0.01; if(asd==0.5){ clearInterval(interbut); asd=0; } } script> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
var interbut; var asd = 0; function ButtonSeen (dfg) { idb = document.getElementById(dfg); interbut = setInterval("forbut(idb)",20); alert(dfg + asd); } function forbut(er) { asd=asd+0.025; er.style="box-shadow: 0 0 20px rgba(255, 2, 2, "+asd+")"; if(asd==0.5) { clearInterval(interbut); asd=0; } }
Все считается, asd увеличивается, НО css не изменяется + не останавливается setInterval!
Добавлено через 11 секунд
какой то бред
Добавлено через 2 минуты
input class="button" id="b_reg" onmouseover="ButtonSeen('b_reg')" type="submit" name="reg_b" value="Зарегистрироваться">
Сообщение от Опан
Теперь setInterval вообще не запускается
Добавлено через 2 минуты
А если убрать зануление asd, то setInretval не останавливается
Добавлено через 36 секунд
Сообщение от SanychBY
Скорее всегоон запускался, но работал в холостую, т.к. asd занулялось
Добавлено через 15 секунд
Сообщение от SanychBY
Стиль по прежнему не изменяется
Добавлено через 33 минуты
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
var interbut; var asd = 0; var kljw; function ButtonSeen (dfg,klj) { idb = "#"+dfg; if(klj==1) { kljw = 1; } else { kljw = 2; } interbut = setInterval("forbut(idb,kljw)",20); } function forbut(er,jkl) { if(jkl==1) { asd=asd+0.025; } else { asd=asd-0.025; } var rty = "0 0 20px rgba(255, 2, 2, "+asd+")"; $(""+er+"").css("box-shadow",rty); if(asd>0.5 || asd0) { clearInterval(interbut); } }
input class="button" id="b_reg" onmouseover="ButtonSeen('b_reg',1)" onmouseout="ButtonSeen('b_reg',2)" type="submit" name="reg_b" value="Зарегистрироваться">
Вот как то так. Без jq не обошелся. Данный код работает, но думаю его можно упростить.
Добавлено через 15 минут
код срабатывает либо не сразу,либо вообще не срабатывает, через три раза.