setInterval выполняется два или один раз (в зависимости от браузера)

@Зверушь · Регистрация: 01.05.2010

Студворк — интернет-сервис помощи студентам

Здравствуйте. Пишу модуль, который осуществляет ротацию изображений.
Столкнулся с проблемой, что код, заключенный в setInterval() выполняется только два раза в FF и IE, и всего один раз в Опере и Хроме.
Значение периода таймера не меняется.
В этот setInterval() вложена еще одна функция setInterval(), но она клиарится еще до того, как истечет время внешнего setInterval().
Количество итераций внешней setInterval() отслеживаю при помощи строки:

JavaScript
1
alert('Новая итерация таймера! Сейчас произойдет смена изображений!');

Ниже привожу проблемный участок кода:

JavaScript
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
zSlider.sliders[id].timer = setInterval(function() {
    var opacityThis = 1; //ПрозрачностьТек
    var opacityNext = 0; //ПрозрачностьСлед
            
    var fade = setInterval(function() {
        //Уменьшать прозрачность текущего изображения
        zSlider.sliders[id].images[currentImage].style.opacity = opacityThis - 0.01;
        zSlider.sliders[id].images[currentImage].style.filter = 'alpha(opacity=' + (opacityThis - 0.01) * 100 + ')';
        opacityThis = opacityThis - 0.01;
                
        //Увеличивать прозрачность следующего изображения
        if (currentImage >= howImages-1) {
            zSlider.sliders[id].images[0].style.opacity = opacityNext + 0.01;
            zSlider.sliders[id].images[0].style.filter = 'alpha(opacity=' + (opacityNext + 0.01) * 100 + ')';
        } else {
            zSlider.sliders[id].images[currentImage+1].style.opacity = opacityNext + 0.01;
            zSlider.sliders[id].images[currentImage+1].style.filter = 'alpha(opacity=' + (opacityNext + 0.01) * 100 + ')';
        }
        opacityNext = opacityNext + 0.01;
        
        //Если переход закончен
        if (opacityThis <=0 && opacityNext >=1) {
            clearInterval(fade); //Остановить переход
            
            //Определиться, какое будет следующее изображение
            if (currentImage >= howImages-1) {
                currentImage = 0;
            } else {
                currentImage++;
            }
        }
    }, zSlider.sliders[id].speed);
    alert('Новая итерация таймера! Сейчас произойдет смена изображений!');
}, zSlider.sliders[id].period);

В чем тут проблема? Заранее спасибо за оказанную помощь.

@Drygba · 30.03.2013, 22:32

а если без alert'a?

@Зверушь · 30.03.2013, 22:39 **[ТС]**

Сообщение от Drygba

а если без alert'a?

Без алерта тоже самое, его то я и вставил только для того, чтобы отследить где затык.

Добавлено через 6 минут
В общем эту проблему я решил, хоть и не понял в чем причина. Внешний setInterval() оформил обычной функцией, которую вызывает setTimeout()... Почему же два вложенных setInterval() не хотели работать?

Как я уже написал, эту проблему я решил. Взамен появилась другая...

Если браузер свернуть или перейти на другою вкладку, а затем вернуться на эту страницу, можно видеть, как картинки меняются с бешенной скоростью а затем всё нормализируется...

Vovan-VE · 31.03.2013, 06:12

setInterval заставляет функцию выполняться периодично. Внешний setInterval при каждом выполнении функции, что на строке 1, регистритует всё новый и новый интервал для всё новой и новой функции, что на строке 5.

Что там внутри делает второй интервал - никого не интерисует. Проблема в том, что они могут пересечья: пока внутренний не успел сам себя остановить, запустился новый внешний интервал и создал новый внутренний. Образовалось два, три, сколько угодно внутренних, работающих поочередно, пока не закончатся.

Вместо внешнего интервала нужен таймаут. Там, где внутренний интервал останавливается (строка 23) там уже запуск нового таймаута:

JavaScript
24
zSlider.sliders[id].timer = setTimeout(arguments.callee, zSlider.sliders[id].period);

Новые блоги и статьи Все статьи Все блоги /
Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это дополнительная запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .

@Drygba 512 / 454 / 119 Регистрация: 17.02.2012 Сообщений: 1,032 Записей в блоге: 1
	30.03.2013, 22:32
	а если без alert'a? 0