Правильная работа с пуазами?

@ИмяПользователя · Регистрация: 02.04.2015

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

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function blink(idArray){
    idArray = JSON.parse(idArray);
    for(var key in idArray){
        var label = document.getElementById(key);
        if ( label.style.backgroundColor == idArray[key] ) {
            label.style.backgroundColor = "white";
        } else {
            label.style.backgroundColor = idArray[key];
        }
    }
}

При формировании страницы в пыхе добавляю нужным элементам id'шники и заношу в массив ключ-значение id и требуемый цвет элементов, после чего в самом конце, добавляю вызов функции:

PHP
1
$respons .= "<script> setInterval(blink('".json_encode($blinkArrayList)."'), 500); </script>";

Всё бы ничего, но: элементы мигают чёрти как... в том смысле, что мигания происходят многократно чаще, нежели раз в пол секунды...

Тут, думаю, важно еще оговориться - у меня вся страница раз в 0.7 секунды ajax-запросом обновляется, там тоже таймер есть, вызываю так:

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
window.onload = function(){
   getContent();
   setInterval(getContent, 700);
}

Прекращение "мигания" должно происходить (и. вроде как и происходит) по клику пользователя, сделано так:

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function blinkOff(numarray, id, color){
    var label = document.getElementById(id);
    label.style.backgroundColor = color;
    label.id = label.id + label.id;
    $.ajax({
        type: "POST",
        url: "/control/blinkOff.php",
        data: {
            numArray: numarray,
            id: id,
        },
        success: function(msg){}
    });
}

Вопрос: как грамотно организовать работу с таймерами? Пробовал увеличивать интервал до полутора-двух секунд - не помогает: первых 2-3 итерации происходят с интервалом, близким к заданному, уже после второй ощутимо сокращается частота "мигания", и буквально через секунду-две наступает опа, вместо эффекта))

Живую ссылку дать не могу - всё крутится локально.

@sad67man · 09.08.2016, 11:01

ИмяПользователя, Попробуйте отключить перегрузку страницы ajax-ом. Могу предположить, что при перегрузке вызываются лишние таймеры.

@ИмяПользователя · 09.08.2016, 11:48 **[ТС]**

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

Попробуйте отключить перегрузку страницы ajax-ом.

- Пробовал.

Сейчас вообще не пойму - всё поломалось: происходит первый обход (всем элементам устанавливается белый цвет), и всё - второго и последующих проходов больше не выполняется... пробую в 2х браузерах: мозиле и хроме. Куда копать, как быть, что смотреть??!

Добавлено через 35 минут
Вот так работает:

JavaScript
1
2
3
4
5
6
7
8
9
function blink(id, color){
    var label = document.getElementById(id);
    if ( label.style.backgroundColor == color ) {
        label.style.backgroundColor = "white";
    } else {
        label.style.backgroundColor = color;
    }
}
setInterval('blink("42871023", "salmon")', 500);

а вот так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
function blink(idArray){
   idArray = JSON.parse(idArray);
   for(var key in idArray){
    var label = document.getElementById(key);
    if ( label.style.backgroundColor == idArray[key] ) {
        label.style.backgroundColor = "white";
    } else {
        label.style.backgroundColor = idArray[key];
    }
   }
}
setInterval(blink('{"42871023":"salmon"}'), 500);

Один раз меняется цвет элемента с текущего на белый и всё...
Почему? Где-то синтаксическая ошибка? М.б. кавычки не те или не там??

Это урезанный для тестов вариант, в реалиях список элементов будет значительно больше, потому и захотел обойтись одним единственным таймером, в котором по циклу обрабатываются элементы... или это концептуально неправильно и каждому элементу нужно сделать свой собственный таймер??
Как они вообще работают - все становятся в одну очередь, или в js многопоток реализован, и все эти таймеры крутятся в собственных нитях?

И еще вопрос: а что происходит, когда у меня, например, такая строка:

JavaScript
1
setInterval('blink("42871023", "salmon")', 500);

2-3-10 раз подряд приезжает ajax-запросом? По идее - они просто перетирают наново, но не зависают ли "старые" таймеры в браузере?? Контент у меня приезжает вот так:

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
function getContent(){
    $.ajax({
        type: "POST",
        url: "/control/active.php",
        data: "orders=active",
        success: function(msg){
            var div = $("#content").html(msg);
        }
    });
}

@sad67man · 09.08.2016, 11:55

ИмяПользователя,
При такой записи

JavaScript
1
setInterval(blink('{"42871023":"salmon"}'), 500);

В setInterval добавляется результат выполнения функции, а не сама функция. Чтоб закинуть саму функцию, то нужно писать без скобок

JavaScript
1
setInterval(blink, 500);

Но нам нужно передать параметры, правильная запись будет такая:

JavaScript
1
2
3
setInterval(function(){
    blink({42871023:"salmon"})
}, 500);

@ИмяПользователя · 09.08.2016, 12:02 **[ТС]**

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

Но нам нужно передать параметры, правильная запись будет такая:

JavaScript
1
2
3
setInterval(function(){
* * blink({42871023:"salmon"})
}, 500);

Огромное спасибо!!
В приведенном примере таки закралась синтаксическая ошибка, если кому-то потом понадобится, "совсем правильно" нужно вызывать так:

JavaScript
1
2
3
setInterval(function(){
    blink('{"42871023":"salmon"}') // Взять аргумент в одинарные кавычки, а имя поля - в двойные
}, 500);

@sad67man · 09.08.2016, 12:20

ИмяПользователя,

JavaScript
1
setInterval('blink("42871023", "salmon")', 500);

Это сокращенная запись. Если код короткий, то можно не писать function и т.д. А передать js код в кавычках. Но это не всегда удобно.
И еще один момент, мне не понятно, зачем вы передаете строку в виде blick('{"42871023":"salmon"}'), а затем ее парсите в JSON, можно же сразу передать js-объект blick({"42871023":"salmon"}), тогда и парсить ничего не нужно.

Добавлено через 12 минут
Ну и как вы поняли, это не синтаксическая ошибка, просто вы передаете строку, а я предлагаю передавать объект.
И функция будет выглядеть так

JavaScript
1
2
3
4
5
6
7
8
9
10
function blink(idArray){
   for(var key in idArray){
    var label = document.getElementById(key);
    if ( label.style.backgroundColor == idArray[key] ) {
        label.style.backgroundColor = "white";
    } else {
        label.style.backgroundColor = idArray[key];
    }
   }
}

@ИмяПользователя · 09.08.2016, 13:47 **[ТС]**

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

Это сокращенная запись. Если код короткий, то можно не писать function и т.д. А передать js код в кавычках. Но это не всегда удобно.

- Спасибо, меня всегда отпугивал синтаксис JS'a именно из-за подобных сокращений, которые либо ты знаешь, и тогда они тебе упрощают жизнь, либо как я - не знаешь, и тогда даже не пойми что и по чём гуглить! ))

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

И еще один момент, мне не понятно, зачем вы...

- Это всё от незнания и недопонимания! ) Не шучу - загуглил работающий пример с "передать параметры из php в javascript", один из перво-попавшихся был именно с json'ом, перепилил его под собственные нужды, обкатал - вроде работает... Вашу идею уловил, да - так будет правильней, еще раз спасибо - малость перепишу формирование вызова в пыхе.
Очень много времени тратится на "поиграться/потестировать" тот или иной вариант оформления - сильно не хватает базовых знаний синтаксиса JS'a, поэтому и пилятся такие вот костыли: что быстрее нагуглилось с минимальным редактированием и еще и завелось после этого - то и заюзал.

Еще раз спасибо, тема пока что исчерпана))

Добавлено через 51 минуту
sad67man, - допилил/перепилил - работает!
1) Таймеры накладываются! Если в каждом результате ajax-запроса возвращать вызов функции "мигания" - он не перезатирается, а накладывается! Мне этот момент был неизвестен - протестировал, выяснил, постараюсь запомнить! ))
2) Жаль, что нельзя 2 раза нажать кнопку "Спасибо"! ))

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,815
	09.08.2016, 11:01
	ИмяПользователя, Попробуйте отключить перегрузку страницы ajax-ом. Могу предположить, что при перегрузке вызываются лишние таймеры. 0

Правильная работа с пуазами?

Решение