Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: замедляется setInterval при переходе на другую вкладку

Здравствуйте, мне нужно сделать прогресс бар(точнее наоборот).
Я сделал вот так, и это работает (это Vue)
currTime: 100,

                timer : setInterval( () =>{
                    this.currTime-=0.1;
                    if(this.currTime===0.0){
                        clearInterval(this.timer);
                    }
                }, 10),


Но при переходе на другую вкладку setInterval замедляется раз в 100, при возвращении - снова работает с нормальной скоростью.
Можно ли это пофиксить? Если нельзя то как еще можно реализовать прогрессбар(чтобы он работал с одинаковой скоростью при переключении между вкладками)?
Ответ: Спасибо
Вопрос: отключение таймера(Интервала) при переходе на другую вкладку

Делаю слайдер, вот такая проблемма, если я сверну окно или уйду на другую вкладку, посижу там немного, и вернусь, слайдер будет матать что дурной.
Цель - очистить интервал.
Вот что сделал, работает.
Но почему иногда не пашет.
(При каких условиях интервал не останавливается)
$(window).blur(function() {
 		clearInterval(sliderTimer);
	});

$(window).focus(function() {
		sliderTimer=setInterval(nextSlide,intervals);
	});
Ответ: xTODx,
При первичной загрузке страницы включаем сразу(ставим флаг загрузки), далее следим за потерей - восстановлением фокуса
window.onblur = отключаем
window.onfocus = включаем
=======================
3. Подстраховать, пусть сам setInterval , внутри которого функция тестирует флаг blur
$(document).ready(function(){blur =false;});
$(window).blur(function() { blur =true; clearInterval(sliderTimer);});
$(window).focus(function() {
  blur =false;  
  sliderTimer=setInterval(function(){ if(blur){clearInterval(sliderTimer); return} ;nextSlide();}, intervals);
});
Вопрос: период в setInterval

Добрый день!
Не могли бы Вы мне помочь?
У меня есть функция, выполняющаяся с периодичностью 30 сек. В ней через setInterval вызывается другая функция, создающая мнимый прогресс бар. Проблема такая, я никак не могу понять какой период необходимо поставить в setInterval, чтобы уместиться в эти 30 сек(как бы глупо это не звучало). Проверяла сколько раз вызывается эта функция и получала каждый раз разные значения, при одном и том же интервале Не могли бы Вы подсказать из-за чего это может происходить?

функция, выполняющаяся с периодом 30сек
function  funk(){
		setInterval(progressLoad, 3000);// вот здесь она вызывается
		    }


функция, имитирующая progress bar
function progressLoad(){//отображение загрузки
	    var progress = $(document.getElementsByClassName('active-kadr')[document.getElementsByClassName('active-kadr').length-1]).find('.progress_bar');
		if(interest != 100) {
			interest++;
			progress[0].style.width = interest + '%';
				}else{}
	
	}
Ответ: Спасибо)))
Вопрос: переход на вкладку

Добрый день. Прошу помощи.

В зависимости от кнопки, которую пользователь нажал на странице 1, должна открываться (становиться активной <li class=" active">any vkladka</li>) определенная вкладка на странице 2.

Сайт на wordpress.

Помогите найти решение.
Ответ: Решение простое. К адресу добавляется хэш - #tab1 - например, и на второй странице скрипт проверяет хэш и активирует вкладку. А вот за реализацией иди ищи плагины на свой ворпресс.
Вопрос: Сделать одноразовый счетчик, если ушел с вкладки и вернулся (без перезагрузки страниц

Как сделать, чтоб если открыл страницу и один раз навел на html, то пошел счетчик, который через минуту обнуляется. Если мышка не наведена на html, то счетчик должен останавливаться, при наведение он должен иметь то значение, которое имел при потери фокуса на html.
Собственно, я только не могу понять, как сделать, чтоб если условие if (time === 60) выполнилось, то перейдя на другую вкладку и вернувшись назад (не обновляя страницу (сейчас отчет начинается заново)) не пошел отсчет заново (вариант присвоить time = 100500 не катит (не красиво)).
<script>             
        var time = 0;    
        $('html').mouseenter(function(){           
            var b = setInterval(function(){
                ++time;
                console.log(time); 
                if (time === 60){
                    //yaCounter12347095.reachGoal("corp_landing_1min"); return true;
                    //ga('send', 'event', 'corp_landing_1min', 'landing_1min');
                    clearInterval(b);
                    time = 0;
                }
            }, 1000);
        });        
</script>
Ответ: Придумал такое решение, если есть лучше, то буду благодарен

<script>             
        var time = 61;
        var b = null;        
        $('html').mouseenter(function(){           
            b = setInterval(function(){
                if (time <= 0) {clearInterval(b);}
                --time;
                console.log(time);                
                if (time === 1){
                    //yaCounter12347095.reachGoal("corp_landing_1min"); return true;
                    //ga('send', 'event', 'corp_landing_1min', 'landing_1min');
                    time = 0;
                }
            }, 1000);            
        }); 
        $('html').mouseleave(function(){clearInterval(b)});      
</script>
Вопрос: Остановить замещаемый setInterval

На страницу аяксом загружается блок который содержит функцию setInterval. Она начинает работать и должна работать, пока не сменится содержимое данного блока. clearInterval не применяется.
Далее содержание этого блока замещается опять аяксом другим html кодом.
То есть js кода, содержащего функцию, на странице больше нет.
НО setInterval продолжает работать.

Подскажите наиболее оптимальные способы остановить его в этом случае.
Ответ: faecker,
А зачем setInterval , когда в Aяксе есть события и загрузки и ошибки ?
Оттель и вызвать функцию по смене контента(или ошибке) Которая не перезагружаема и находится на основном не меняемом контенте

Сообщение от Aetae
Использовать clearInterval.
2. Ставить глобальный timerID, который гасить через вышеуказанное Aetae, тогда удаляется и при перезагрузке функций с setInterval (Хотя - размещать setInterval на сменяемом контенте - весьма плохой тон для js
Вопрос: Уменьшить размер кода и работа setInterval.

Добрый день, делаю запросы серверу он отвечает в формате json, (значение температуры и статус(норма/авария)).
Далее это отображаю в div (на картинке svg)
И в случае аварии надо сделать мигание текста.
Так как про объекты и классы мало что знаю код получился такой:
GetSettingTimeout3('GetVar.CGI',CYCLIC,function () {
			var objJSON = eval('(' + this + ')');

			var TempHot = document.getElementById("IdT_Hot");
			var TextStatusT_Hot = document.getElementById("Id_StatusT_Hot");			
			//--------------------------------------------------------------------------------------
			TempHot.innerHTML="Т горячая="+objJSON.T_Hot+" \u2103";
			//--------------------------------------------------------------------------------------
			clearInterval(TimerID_blink[0]);
			if(objJSON.T_ST_Hot==0){	//Статус температуры 
				TempHot.setAttribute("fill",RGB_STATUS_NORM); //зеленый
				TextStatusT_Hot.setAttribute("fill",RGB_STATUS_NORM); //зеленый
				TextStatusT_Hot.innerHTML="Норма";
			}
			if(objJSON.T_ST_Hot==1){	//Статус температуры 
				TempHot.setAttribute("fill",RGB_STATUS_ADMONITION); //желтый				
				TextStatusT_Hot.setAttribute("fill",RGB_STATUS_ADMONITION); //желтый				
				TextStatusT_Hot.innerHTML="Норма";
			}
			if(objJSON.T_ST_Hot==2){	//Статус температуры 
				TimerID_blink[0]=setInterval(TextBlink,300);		 
			}

}



var ModeBlink=0;
function TextBlink(){
	var TempHot = document.getElementById("IdT_Hot");
	var TextStatusT_Hot = document.getElementById("Id_StatusT_Hot");
	if(ModeBlink==0){
		//-------------------------------
		TempHot.innerHTML="Т горячая="+"80"+" \u2103";
		TempHot.setAttribute("fill",RGB_STATUS_ERROR); //Красный
		TextStatusT_Hot.setAttribute("fill",RGB_STATUS_ERROR); //Красный
		TextStatusT_Hot.innerHTML="Авария";		
		//-------------------------------
		ModeBlink=1;
	}else{
		//-------------------------------
		TempHot.innerHTML=""
		TextStatusT_Hot.innerHTML="";		
		//-------------------------------
		ModeBlink=0;
	}
}


И тут возникает 3 вопроса:
1) Во что это можно завернуть это всё что бы применить к другим принимаемым данным.
2) Правильно ли я использую setInterval ? (не будет ли происходит накопление, и в следствии чего при изменении статуса аварии в норму мигание не остановится)
3) Как сделать асинхронную функцию TextBlink. Что бы можно было использовать в остальных авариях. И мигание происходило везде по своему таймеру.


Ps: Всего параметров около 10, и для каждого городить такой код не вариант, так как сильно увеличится размер файла, что для меня очень критично.
Ответ: pokk,
<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            background-color: #D3D3D3;
        }
    </style>
</head>

<body>
    <svg height="45" width="200" class="Hot">
        <text class="title" x="0" y="15" fill="#00FF00"></text>
        <text class="value" x="0" y="30" fill="#00FF00"></text>
        <text class="status" x="0" y="45" fill="#00FF00"></text>
    </svg>
    <svg height="45" width="200" class="Cold">
        <text class="title" x="0" y="15" fill="#00FF00"></text>
        <text class="value" x="0" y="30" fill="#00FF00"></text>
        <text class="status" x="0" y="45" fill="#00FF00"></text>
    </svg>
    <svg height="45" width="200" class="Pump">
        <text class="title" x="0" y="15" fill="#00FF00"></text>
        <text class="value" x="0" y="30" fill="#00FF00"></text>
        <text class="status" x="0" y="45" fill="#00FF00"></text>
    </svg>
    <svg height="45" width="200" class="Fan">
        <text class="title" x="0" y="15" fill="#00FF00"></text>
        <text class="value" x="0" y="30" fill="#00FF00"></text>
        <text class="status" x="0" y="45" fill="#00FF00"></text>
    </svg>
    <script>
        function TextBlink(arr) {
            var b = true;
            return function() {
                arr.forEach(function(el) {
                    el.style.visibility = b ? "hidden" : "visible";
                });
                b = !b

            }
        }
        var timer;

        var data = {
            Hot: {
                title: "Т горячая",
                value: 120 + " \u2103",
                status: "Авария",
                blink: true,
                color: "#FF0000"
            },
            Cold: {
                title: "Т холодная",
                value: 40 + " \u2103",
                status: "Норма",
                blink: false,
                color: "#008000"
            },
            Pump: {
                title: "Pump",
                value: 0,
                status: "",
                blink: false,
                color: "#000000"
            },
            Fan: {
                title: "Вентилятор",
                value: 0,
                status: "",
                blink: false,
                color: "#000000"
            }
        }

        function foo(data) {
            var arr = [];
            clearInterval(timer);
            Object.keys(data).forEach(function(key) {
                var el = document.querySelector('.' + key);
                el.style.visibility = "visible";
                ['title', 'value', 'status'].forEach(function(item) {
                    var txt = el.querySelector('.' + item)
                    txt.textContent = data[key][item];
                    txt.setAttribute("fill", data[key]["color"]);
                });
                data[key]["blink"] && arr.push(el);
            });

            timer = setInterval(TextBlink(arr), 300);
        }
        foo(data)
        data = {
            Hot: {
                title: "Т горячая",
                value: 99 + " \u2103",
                status: "Норма",
                blink: false,
                color: "#008000"
            },
            Cold: {
                title: "Т холодная",
                value: 70 + " \u2103",
                status: "Норма",
                blink: false,
                color: "#FFFF00"
            },
            Pump: {
                title: "Pump",
                value: 0,
                status: "",
                blink: false,
                color: "#000000"
            },
            Fan: {
                title: "Вентилятор",
                value: 0,
                status: "",
                blink: false,
                color: "#000000"
            }
        }
        window.setTimeout(function() {
            foo(data) //пришли новые данные
        }, 3000)
    </script>
</body>

</html>
Вопрос: Автоматический переход по вкладкам

есть две ссылки
HTML5
1
2
3
4
<li class="current"><a href="#series" class="button">series</a></li><!--
                -->or<li>
                        <a id="test" href="#items" class="button">items</a>
                    </li>
по нажатию на них, без перезагрузки переключаются вкладки, у блоков id соответствующие series, items, потребовалось сделать автоматический переход по выполнению некого условия, после перезагрузки страницы, вот что я сделал

Javascript
1
2
3
4
5
6
<script type="text/javascript">if(location.href.indexOf('?function=') > -1) {
 
            document.getElementById("test").click();
 
        }
    </script>
в адресную строку добавляется #items т.е. вроде как срабатывает, но вкладка не переключается.
Ответ: Может быть стоит попробовать выполнить скрипт строго после загрузки страницы? С атрибутом defer или же в скрипте указать:
Javascript
1
2
3
4
5
$(document).ready(function () {
  if(location.href.indexOf('?function=') > -1) {
    document.getElementById("test").click();
  }
});
Вопрос: Выполнение функции при переходе на вкладку

Подскажите, можно ли выполнять функцию, при переходе на текущую вкладку в браузере?
Например открыто много вкладок. Я возвращаюсь обратно к своей - и там в этот момент должна выполняться функция.
Возможно ли так?
Ответ: oopros,
window.onfocus
только может зависнуть страница
Вопрос: Вопрос про setInterval

Привет!

Итак, есть setInterval, который листает слайдер, допустим каждые 5 сек.

И отдельно есть функция prevNext, которая по клику листает слайдер тудым/сюдым.

Листая слайдер кликами туда/сюда, я заметил, что setInterval по прежнему отсчитывает своё время и возникает ситуация, когда событие по клику до конца ещё не выполнилось, а setInterval уже сработал. Не красиво ...

Собственно, как можно временно замораживать setInterval?



P.S. Сорян за местами тупой код, с JS и jQuery только знакомлюсь!
Ответ:
Сообщение от ArtemBielykh
как можно временно замораживать setInterval?
Как вариант, удалять его и запускать, после паузы, в setTimeout()...