Бесконечный вызов функций с интервалом

@Котейский · Регистрация: 21.06.2017

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

Есть программа "Светофор". На HTML нарисован светофор и по нажатию соответствующих кнопок он меняет цвет. Вот функции которые это делают:

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
35
function change_color_red() {
    var color = "black";    
    $(".circle02").attr("fill",color);
    $(".circle03").attr("fill",color);
    if($(".circle01").attr("fill") == color){
    $(".circle01").attr("fill","red")}
        else{
            $(".circle01").attr("fill",color);
        };
        
};
 
function change_color_yellow() {
    var color = "black";    
    $(".circle01").attr("fill",color);
    $(".circle03").attr("fill",color);
    if($(".circle02").attr("fill") == color){
    $(".circle02").attr("fill","yellow")}
        else{
            $(".circle02").attr("fill",color);
        };
        
};
 
function change_color_green() {
    var color = "black";    
    $(".circle01").attr("fill",color);
    $(".circle02").attr("fill",color);
    if($(".circle03").attr("fill") == color){
    $(".circle03").attr("fill","green")}
        else{
            $(".circle03").attr("fill",color);
        };
        
};

Есть строка в которую записывается интервал в секундах. Если ввести число и нажать кнопку (вызов time_ceeper() ), то светофор начнет переключаться в автоматическом режиме от зеленого к красному, с указанным интервалом в секундах.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function time_ceeper() {
    var set_time = Number ($(".time_area").val());
    if(isNaN(set_time)){    
        alert("НЕ ЧИСЛО!!!");
    }else
    {       
        setTimeout(change_color_green, (set_time*1000));
        setTimeout(change_color_yellow, (set_time*2000));
        setTimeout(change_color_red, (set_time*3000));      
    };
};

Проблема в том, что я не могу придумать, как бесконечно зациклить этот процесс. Путем экспериментов, понял, что при работе в цикле, цикл не дожидается окончания работы setTimeout а переходит сразу к следующей строке. Вызов следующей функции change_color...из предыдущей так-же, почему-то, не работает.
Помоготе разобраться. Заранее спасибо!

@renat_dmitriev · 18.11.2017, 21:20

function change_color()Котейский,

Сделайте одну функцию и поставьте внутрь нее вызов самой себя с интервалом в 1000.
Это может выглядеть к примеру так

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
function changeColor()
{
    var set_time = Number ($(".time_area").val());
    
    if(isNaN(set_time))return;
     
    var colors = {'black': 'black', 1: 'red', 2: 'yellow', 3: 'green'};
    
    for(var i = 1; i < 4; i++)
    {
        if($(".circle0" + i).attr("fill") !== colors['black'])
        {
            $(".circle0" + i).attr("fill", colors['black']);
            
            if(++i > 3) i = 1;
            
            $(".circle0" + i).attr("fill", colors[i]);
            
            setTimeout(changeColor, set_time * 1000);
            break;
        }   
    }
}
 
function time_ceeper(){
    var set_time = Number ($(".time_area").val());
    if(isNaN(set_time)){    
        alert("НЕ ЧИСЛО!!!");
    }else{
        setTimeout(changeColor, set_time * 1000);   
    }
}

@Котейский · 26.11.2017, 20:05 **[ТС]**

Спасибо!

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Котейский 0 / 0 / 0 Регистрация: 21.06.2017 Сообщений: 58
	26.11.2017, 20:05 [ТС]
	Спасибо! 0