Оптимизация setInterval()

@WeMeSder · Регистрация: 13.07.2014

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

В данном коде слишком много setInterval(). Вопрос и проблема в том как оптимизировать так чтобы было n-ое количество setInterval -ов

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
var robotNameIndex = 0;
var kollDiv = new Array();
var indexKoll = 0;
var ser = -1;
var interr;
var kl = setInterval( "klone()","200" );
 
        function klone () {
            robotNameIndex++;
            
            kollDiv[indexKoll] = document.body.appendChild(document.createElement( "div" ));
            
            var nameAttr1 = document.createAttribute( 'id' ); // создаем атрибут
            nameAttr1.value = "r" + robotNameIndex;  // устанавливаем значение
            kollDiv[indexKoll].attributes.setNamedItem( nameAttr1 ); // привязываем атрибут
            
            var nameAttr1 = document.createAttribute( 'style' ); // создаем атрибут
            nameAttr1.value = "top:400px;left:400px;";  // устанавливаем значение
            kollDiv[indexKoll].attributes.setNamedItem( nameAttr1 ); // привязываем атрибут
            
            indexKoll++;
            ser++
            starter();
            //-----------------------------------------------..............
                    if( kollDiv.length > 24 ) {
                    clearInterval( kl )
                    }
        }
var inFor = -1;
var arrayFor = 0;
        function starter() {    
            inFor++
            if( kollDiv.length > inFor ) {  
            vdoh(kollDiv[inFor])
            
            }
        }
        //----------------------------------test
        setInterval( "vdoh( kollDiv[0])" , 15 );
        setInterval( "vdoh( kollDiv[1])" , 15 );
        setInterval( "vdoh( kollDiv[2])" , 15 );
        setInterval( "vdoh( kollDiv[3])" , 15 );
        setInterval( "vdoh( kollDiv[4])" , 15 );
        setInterval( "vdoh( kollDiv[5])" , 15 );
        setInterval( "vdoh( kollDiv[6])" , 15 );
        setInterval( "vdoh( kollDiv[7])" , 15 );
        setInterval( "vdoh( kollDiv[8])" , 15 );
        setInterval( "vdoh( kollDiv[9])" , 15 );
        setInterval( "vdoh( kollDiv[10])" , 15 );
        setInterval( "vdoh( kollDiv[11])" , 15 );
        setInterval( "vdoh( kollDiv[12])" , 15 );
        setInterval( "vdoh( kollDiv[13])" , 15 );
        setInterval( "vdoh( kollDiv[14])" , 15 );
        setInterval( "vdoh( kollDiv[15])" , 15 );
        setInterval( "vdoh( kollDiv[16])" , 15 );
        setInterval( "vdoh( kollDiv[17])" , 15 );
        setInterval( "vdoh( kollDiv[18])" , 15 );
        setInterval( "vdoh( kollDiv[19])" , 15 );
        setInterval( "vdoh( kollDiv[20])" , 15 );
        setInterval( "vdoh( kollDiv[21])" , 15 );
        setInterval( "vdoh( kollDiv[22])" , 15 );
        setInterval( "vdoh( kollDiv[23])" , 15 );
        setInterval( "vdoh( kollDiv[24])" , 15 );
        setInterval( "vdoh( kollDiv[25])" , 15 );
        setInterval( "vdoh( kollDiv[26])" , 15 );
        setInterval( "vdoh( kollDiv[27])" , 15 );
        setInterval( "vdoh( kollDiv[28])" , 15 );
        setInterval( "vdoh( kollDiv[29])" , 15 );
        setInterval( "vdoh( kollDiv[30])" , 15 );

Спасибо всем кто заинтересуется данным вопросам..

@Thisman · 04.10.2014, 19:09

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
 setInterval( "vdoh( kollDiv[0])" , 15 );
 setInterval( "vdoh( kollDiv[1])" , 15 );
 setInterval( "vdoh( kollDiv[2])" , 15 );
 setInterval( "vdoh( kollDiv[3])" , 15 );
 setInterval( "vdoh( kollDiv[4])" , 15 );
 setInterval( "vdoh( kollDiv[5])" , 15 );
 setInterval( "vdoh( kollDiv[6])" , 15 );
 setInterval( "vdoh( kollDiv[7])" , 15 );
 setInterval( "vdoh( kollDiv[8])" , 15 );
 setInterval( "vdoh( kollDiv[9])" , 15 );
 setInterval( "vdoh( kollDiv[10])" , 15 );
 setInterval( "vdoh( kollDiv[11])" , 15 );
//...

~~МАТЬ МОЯ ЖЕНЩИНА~~ Начнем по порядку

@Eva Rosalene · 04.10.2014, 19:16

Не по теме:

Боже мой :swoon:

JavaScript
1
2
3
4
5
for (var i = 0; i < 31; ++i) setInterval((function (item){
   return (function (){
      vdoh(item);
   });
})(kollDiv[i]), 15);

Это если сохранять логику Вашего кода.

А вообще гораздо лучше поставить одну функцию в интервал, которая будет вызывать все остальные.

JavaScript
1
2
3
setInterval(function (){
   for (var i = 0; i < 31; ++i) vdoh(kollDiv[i]);
}, 15);

@WeMeSder · 04.10.2014, 19:31 **[ТС]**

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

1
2
3
setInterval(function (){
* *for (var i = 0; i < 31; ++i) vdoh(kollDiv[i]);
}, 15);

Да, этот вариант замечательный. Спасибо за кусочек опыта.

@Thisman · 04.10.2014, 19:37

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

"klone()"

Правильно писать clone.

Рассмотрим функцию klo... clone:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function klone () {
            robotNameIndex++;
            
            kollDiv[indexKoll] = document.body.appendChild(document.createElement( "div" ));
            
            var nameAttr1 = document.createAttribute( 'id' ); // создаем атрибут
            nameAttr1.value = "r" + robotNameIndex;  // устанавливаем значение
            kollDiv[indexKoll].attributes.setNamedItem( nameAttr1 ); // привязываем атрибут
            
            var nameAttr1 = document.createAttribute( 'style' ); // создаем атрибут
            nameAttr1.value = "top:400px;left:400px;";  // устанавливаем значение
            kollDiv[indexKoll].attributes.setNamedItem( nameAttr1 ); // привязываем атрибут
            
            indexKoll++;
            ser++
            starter();
            //-----------------------------------------------..............
                    if( kollDiv.length > 24 ) {
                    clearInterval( kl )
                    }
        }

Как я понял функция, добавляет div с некоторыми атрибутами. Я сделаю это за n строчек :

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function createEl(opt) {
    var tag = opt.tag || "div";
    var id = opt.id || "";
    var parent = opt.parent || document.body;
    var style = opt.style || {};
 
    var el = document.createElement(tag);
    el.id = id;
    parent.appendChild(el);
 
    for(var i in style) {
        el.style[i] = style[i];
    }
}

Называть clone передумал, ибо она не клонирует, а создает элемент. Используем вот так вот:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var robotNameIndex = 0;
var kollDiv = [];
var indexKoll = 0;
var ser = -1;
var interr;
var timer = setInterval(function () {
    indexKoll++;
    var el = createEl({
        tag:'div',
        id:"r" + ndexKoll,
        style :{
            /* тут стиль */
            width:"100px",
            height:"100px",
            background : "black"
        } 
    })
    kollDiv.push(el);
    ser++;
    //starter(); закоментил ибо еще не дошли
    if(indexKoll > 5) clearInterval(timer);
},1000)

Добавлено через 3 минуты
WeMeSder, Не совсем понятно ,что делает функция vdoh,посмотреть бы ее код

@WeMeSder · 16.12.2014, 21:00 **[ТС]**

Функция vdoh делает лишь хаотичное движения div- ов по стр.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
        function vdoh( namOb ) {
        
            var i1 = Math.round( Math.random() * 1 );
            var i2 = Math.round( Math.random() * 1 );
            w = namOb.offsetTop;
            g = namOb.offsetLeft;
                if( i1 == 0 && (document.body.clientHeight) - 10 > w ) {
                    w++;
                }
                if( i1 == 1 && w > krai ) {
                    w--;
                }
                if( i2 == 0 && (document.body.clientWidth) - 10 > g ) {
                    g++;
                }
                if( i2 == 1 && g > krai ) {
                    g--;
                }
            namOb.style.left = g;
            namOb.style.top = w; }

Но еща идея была в том что бы собрать div - ы в один общий, размера - "на сколько хватит" из всех имеющихся

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
        function zbor() {
            var koorX = kollDiv[0].offsetTop;
            var koorY = kollDiv[0].offsetLeft;
                for( i = 1; i < kollDiv.length; i++ ) {
                    kollDiv[i].style.background = "blue";
                    var positionX = kollDiv[i].offsetTop;
                    var positionY = kollDiv[i].offsetLeft;
                    
        //---------------------
        
        
        
        
                        if( i%4 == 0 ) {
                            sdT++;
                        }
                        if( i%4 == 1 ) {
                            sdU++;
                        }
                        if( i%4 == 2 ) {
                            sdT--;
                        }
                        if( i%4 == 3 ) {
                            sdU--;
                        }
                        
                        
                        if( 0 == 0 ) {
                                if( koorX < positionX + sdR * sdT ) {
                                    positionX--;
                                }
                                if( koorX > positionX + sdR * sdT ) {
                                    positionX++;
                                }
                                if( koorY < positionY + sdR * sdU ) {
                                    positionY--;
                                }
                                if( koorY > positionY + sdR * sdU ) {
                                    positionY++;
                                }
                        }
                            
 
                        
            //------------------------          
                    kollDiv[i].style.left = positionY;
                    kollDiv[i].style.top = positionX;
                }
                blocker++;
                sdU = 0;
                sdT = 0;
                krai = 10;
        }

- здесь размером 2x2 а нужно n x n -?

(<style> div{height:10px;width:10px;background-color:green;position:absolute;} </style>)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .